/* ===========================
   RESPONSIVE
   BUMBY
=========================== */



@media (max-width:1200px){



    .artist-menu {


        grid-template-columns:

        repeat(3,1fr);


    }



    .menu-card:last-child {


        grid-column:

        2;


    }




    .hero {


        gap:

        40px;


    }




    .hero-image img {


        height:

        550px;


    }



}







@media (max-width:900px){



    .header {


        padding:

        20px 5%;


    }




    .hero {


        flex-direction:

        column-reverse;


        text-align:center;


        padding-top:

        120px;


    }




    .hero-content {


        width:

        100%;


    }




    .hero-description {


        margin:auto;


    }




    .hero-image {


        width:

        75%;


    }




    .artist-menu {


        grid-template-columns:

        repeat(2,1fr);


        padding:

        60px 5%;


    }




    .menu-card:last-child {


        grid-column:auto;


    }




    .flash-grid,


    .portfolio-grid {


        grid-template-columns:

        repeat(2,1fr);


    }




}








@media (max-width:600px){



    .header {


        position:

        absolute;


    }




    .logo {


        font-size:

        1.8rem;


    }




    .header-button {


        padding:

        10px 18px;


        font-size:

        .9rem;


    }





    .hero {


        padding:

        110px 25px 60px;


    }




    .hero h1 {


        font-size:

        4rem;


    }




    .hero-style {


        font-size:

        1.1rem;


    }




    .hero-image {


        width:

        90%;


    }




    .hero-image img {


        height:

        430px;


    }





    .artist-menu {


        display:flex;


        overflow-x:auto;


        scroll-snap-type:

        x mandatory;


        gap:

        20px;


        padding:

        40px 25px;


    }




    .menu-card {


        min-width:

        280px;


        height:

        280px;


        scroll-snap-align:

        center;


    }





    .menu-card:hover {


        transform:none;


    }






    .content-section {


        padding:

        70px 25px;


    }




    .section-title {


        margin-bottom:

        40px;


    }




    .flash-grid,


    .portfolio-grid {


        grid-template-columns:

        1fr;


    }





    .placeholder-card {


        height:

        380px;


    }



}