/* ============================================================
   TABLET
============================================================ */

@media (min-width: 600px) {

    .category-grid {

        grid-template-columns:
            repeat(4, 1fr);
    }


    .food-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .testimonial-grid {

        grid-template-columns:
            repeat(3, 1fr);
    }


    .footer-grid {

        grid-template-columns:
            2fr 1fr 1fr 1fr;
    }

}


/* ============================================================
   DESKTOP
============================================================ */

@media (min-width: 900px) {

    .desktop-nav {

        display: flex;
    }


    .login-button {

        display: block;
    }


    .mobile-menu-button {

        display: none;
    }


    .category-grid {

        grid-template-columns:
            repeat(4, 1fr);

        gap: 18px;
    }


    .category-card {

        min-height: 210px;
    }


    .food-grid {

        grid-template-columns:
            repeat(4, 1fr);
    }


    .about-grid {

        grid-template-columns:
            1fr 1fr;

        gap: 70px;
    }


    .gallery-grid {

        grid-template-columns:
            repeat(4, 1fr);

        grid-auto-rows: 180px;
    }


    .gallery-large {

        grid-column: span 2;

        grid-row: span 2;

        min-height: 0;
    }


    .gallery-item {

        min-height: 0;
    }


    .contact-grid {

        grid-template-columns:
            1fr 1fr;

        gap: 100px;
    }

}


/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (min-width: 1200px) {

    .header-container {

        min-height: 82px;
    }


    .section {

        padding-block: 100px;
    }


    .hero {

        min-height: 720px;
    }

}
/* =========================================
   MOBILE NAVIGATION
========================================= */

@media (max-width: 899px) {

    .desktop-nav {
        display: none !important;
    }

    .menu-toggle {
        display: flex;
    }

    .mobile-menu {
        display: none;
    }

    .mobile-menu.active {
        display: grid;
    }

    .mobile-nav {
        display: none;
    }

    .mobile-nav.active {
    display: grid;
    }

    .login-button {
    display: none;
    }

}


/* =========================================
   DESKTOP NAVIGATION
========================================= */

@media (min-width: 900px) {

    .desktop-nav {
        display: flex;
    }

    .menu-toggle {
        display: none !important;
    }

    .mobile-menu {
        display: none !important;
    }

    .mobile-nav {
        display: none !important;
    }

}