@media (max-width: 980px) {
    .nav {
        position: relative;
    }

    .navlinks {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 45;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 8px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 0 0 16px 16px;
        box-shadow: 0 18px 35px rgba(18, 53, 36, .14);
    }

    .navlinks.open {
        display: flex;
    }

    .navlinks a {
        padding: 13px 14px;
        border-radius: 10px;
    }

    .navlinks a:hover,
    .navlinks a:focus-visible {
        background: var(--soft);
    }

    .menu-btn {
        display: block;
        flex: 0 0 44px;
        cursor: pointer;
    }
}

@media (max-width: 700px) {
    .nav {
        gap: 12px;
    }

    .header-cta {
        display: none;
    }

    .chip,
    .cert-btn,
    .search-inline input {
        min-height: 44px;
    }

    .school-head,
    .school-head > * {
        min-width: 0;
    }

    .modal-close {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .modal-body p {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 360px) {
    .container {
        width: min(var(--max), calc(100% - 24px));
    }

    .school-head {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .school-head > :last-child {
        width: 100%;
        max-width: 100%;
    }

    .meal-head {
        align-items: flex-start;
    }
}