@media screen and (max-width: 1140px){
    .banner{
        height: 420px;
    }

    .banner .banner_title{
        height: 250px;
    }

    .banner .banner_title h1{
        font-size: 27px;
    }

    .banner .buttons{
        height: 170px;
    }



    .catogorie .catogorie_grid{
        grid-template-columns: auto auto;
    }

    .uitgelicht .products_grid{
        grid-template-columns: 1fr 1fr 1fr;
    }
    
}



@media screen and (max-width: 820px){
    .banner{
        background: linear-gradient(121deg, 
                rgb(0,39,94) 58%, rgba(0,0,0, 0) 0%),
                url("../images/banner_image_mob.jpg");
        background-size : cover;
        background-position: bottom;
    }

    .banner .banner_title{
        height: 270px;
    }

    .banner .banner_title h1{
        font-size: 22px;
    }



    .banner .buttons{
        height: 150px;
    }

    .banner .buttons button{
        font-size: 15px;
        padding: 7px 12px 7px 12px;
    }


    .brands .brands_flex{
        margin: 0;
        padding: 0 0 14px 0;
    }

    .brands .brands_flex a{
        display: block;
        min-width: 122px;
    }

    .brands .brands_flex #rolex{
        margin: 0 0 0 5%;
    }

    .brands .brands_flex #gucci{
        min-width: 62px;
    }



    .uitgelicht .products_grid{
        grid-template-columns: 1fr 1fr;
    }
}




@media screen and (max-width: 520px){
    .banner{
        background: linear-gradient(121deg, 
                rgb(0,39,94) 67%, rgba(0,0,0, 0) 0%),
                url("../images/banner_image_mob.jpg");
        background-size : cover;
        background-position: bottom;
    }

    .banner .banner_title h1{
        font-size: 17px;
    }

    .banner .buttons button{
        align-self: flex-start;
    }



    .catogorie .catogorie_grid{
        grid-template-columns: auto;
    }




    .uitgelicht .products_grid{
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0;
        padding: 0 0 22px 0;
        grid-column-gap: 0;
        grid-template-columns: none;
        
    }

    .uitgelicht .products_grid .product{
        min-width: 210px;
        margin: 0 0 0 5%;
    }

    .uitgelicht .products_grid .tien{
        margin-right: 5%;
    }
}