/* =====================================================
   Vice City Vibe
   responsive.css

   Mobile and tablet layouts
===================================================== */



/* =====================================================
   LARGE TABLETS / SMALL LAPTOPS
===================================================== */


@media (max-width: 1100px) {


    .category-grid {

        grid-template-columns:

            repeat(2, 1fr);

    }


    .navigation-links {

        gap:1rem;

    }


}





/* =====================================================
   TABLETS
===================================================== */


@media (max-width: 850px) {


    .main-navigation {

        flex-direction:column;

        gap:1.2rem;

    }



    .navigation-links {

        justify-content:center;

        flex-wrap:wrap;

    }



    .hero {

        min-height:

            90vh;

    }



    .hero h1 {

        letter-spacing:

            4px;

    }


}





/* =====================================================
   MOBILE DEVICES
===================================================== */


@media (max-width: 600px) {



    .container {

        width:92%;

    }




    /* Navigation */


    .site-header {

        position:absolute;

    }



    .main-navigation {

        padding-top:

            1rem;

    }



    .logo {

        font-size:

            1.4rem;

        text-align:center;

    }



    .navigation-links {

        display:none;

    }





    /* Hero */


    .hero {

        min-height:

            100vh;

        text-align:center;

    }



    .hero h1 {

        font-size:

            2.3rem;


        letter-spacing:

            3px;

    }



    .hero-description {


        font-size:

            0.9rem;


        letter-spacing:

            1px;

    }





    /* Categories */


    .category-grid {

        grid-template-columns:

            1fr;

    }



    .category-grid .card {


        min-height:

            180px;

    }





    /* Buttons */


    .button {


        width:

            100%;


        max-width:

            280px;

    }





    /* Sections */


    section {

        padding:

            3rem 0;

    }




}





/* =====================================================
   SMALL PHONES
===================================================== */


@media (max-width: 380px) {



    .hero h1 {


        font-size:

            2rem;


    }



    .hero-tagline {


        font-size:

            1rem;


    }



}