/* 90-responsive.css
 * Estilos para responsividade e ajustes finos
 * Criado por Agência Federal
 * https://agencia.federal.gov.br
 */

@media (max-width: 980px) {
    .af-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .af-grid.cols-3 {
        grid-template-columns: 1fr;
    }

    .af-search input {
        width: min(260px, 60vw);
    }

    .af-official-details .af-official-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    :root {
        --af-off-ic: 56px;
        --af-off-title: 18px;
        --af-off-body: 14px;
    }

    .af-official-col h5 {
        max-width: 30ch;
    }

    .af-official-col p {
        max-width: 52ch;
    }

    .af-hdr-top {
        display: none;
    }

    .af-hdr-mobile {
        display: flex;
    }

    .af-nav-menu {
        display: none;
    }

    .af-nav-sep {
        display: none;
    }
}

@media (max-width: 560px) {
    .af-topbar .af-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .af-header .af-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .af-nav ul {
        gap: 12px;
    }

    .af-hero-track {
        height: 420px;
    }

    .af-hero-content {
        padding: 44px 0;
    }

    .af-hero-nav {
        display: none;
    }
}

@media (max-width: 768px) {
    .af-logo-img {
        height: 52px;
    }
}

@media (max-width: 520px) {
    :root {
        --af-off-pad-x: 14px;
        --af-off-ic: 52px;
        --af-off-title: 17px;
        --af-off-body: 13.5px;
    }
}