@media (max-width: 1050px) {
    .menu {
        padding: 1% 3.5%;
    }

    .itens-do-menu {
        padding: 0 10px;
    }
}

@media (max-width: 980px) {
    .menu .menu-icon {
        display: none;
        padding: 1% 2%;
    }
}

@media (max-width: 890px) {

    .logo-do-menu {
        font-size: clamp(1.3rem, 2.5vw, 1.5rem);
    }

    #material-de-apoio {
        display: none;
    }

    #mat-de-apoio-media {
        display: inline-block;
    }

    .itens-do-menu {
        font-size: 1.7vw;
    }

}

@media (max-width: 875px) {

    .container-de-historias {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 750px) {

    .container {
        max-width: 98vw;
    }

    .logo-do-menu {
        font-size: 18px;
    }

    .itens-do-menu a {
        font-size: 13px;
    }
}

@media (max-width: 701px) {

    .itens-do-menu {
        gap: 0.45rem;
    }

    #material-de-apoio {
        display: none;
    }

    #mat-de-apoio-media {
        display: inline-block;
    }
}

@media (max-width: 690px) {
    .menu {
        display: grid;
        grid-template-columns: 33% 67%;
        padding: 1% 2%;
        gap: 0;
    }

    .logo-do-menu {
        font-size: 2.8vw;
    }

    .itens-do-menu {
        padding: 0;
        gap: 0;
        width: 100%;
        justify-content: space-around;
        align-items: center;
        font-size: 2vw;
        /* proporcional aos 63% da grid */
    }

    .itens-do-menu a {
        white-space: nowrap;
    }

}

@media (max-width: 560px) {

    .container {
        max-width: 100vw;
    }

    .menu {
        grid-template-columns: 24% 66% 10%;
        position: relative;
    }

    #menu-icon {
        align-self: center;
    }

    .menu .menu-icon {
        display: block;
    }

    .logo-do-menu {
        font-size: 1.2rem;
    }

    .itens-do-menu {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .itens-do-menu.open {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.85rem;
        position: absolute;
        top: calc(100% - 0.5rem);
        right: 0.5rem;
        width: auto;
        padding: 1rem;
        background-color: #e6e3d6;
        border: 1px solid rgba(107, 62, 30, 0.18);
        border-radius: 12px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
        z-index: 20;
    }

    .itens-do-menu.open li {
        width: 100%;
        padding: 0;
        border-bottom: 0;
    }

    .itens-do-menu.open a {
        display: block;
        width: 100%;
        font-size: 0.95rem;
        line-height: 1.3;
        text-align: right;
    }

}