@media screen and (max-width: 1512px){
    .wrapper_nos-concepts img {
        width: clamp(16.8rem, 26.754vw + 0.747rem, 41.2rem);
        height: clamp(16.8rem, 26.754vw + 0.747rem, 41.2rem);
    }
    
    

}

@media screen and (max-width: 1200px){
    
    h1{
        grid-area: 3 / 2 / 4 / 3;
    }
}
@media screen and (max-width: 834px){

    #hero {
        background: url("./img/hero-tablet.jpg") no-repeat center center;
        background-size: cover;
    }

}

@media screen and (max-width: 600px){

    .wrapper_nos-concepts img {
        width: clamp(29.6rem, 41.429vw + 16.343rem, 41.2rem);
        height: clamp(29.6rem, 41.429vw + 16.343rem, 41.2rem);
    }
   .wrapper_nos-concepts {
        

        grid-template-columns: clamp(29.6rem, 41.429vw + 16.343rem, 41.2rem);
        grid-template-rows: clamp(29.6rem, 41.429vw + 16.343rem, 41.2rem) 25vh clamp(29.6rem, 41.429vw + 16.343rem, 41.2rem) 25vh
        clamp(29.6rem, 41.429vw + 16.343rem, 41.2rem) 25vh ;
        row-gap: clamp(2.4rem, 8.571vw + -0.343rem, 4.8rem);

   }

        .vegetal{
            grid-area: 1/1/2/2;
            z-index: 1;
        }
        .sans-gluten{
            grid-area: 3/1/4/2;
            z-index: 1;
        }
        .fait-maison{
            grid-area: 5/1/6/2;
            z-index: 1;
        }
        .vegetal-default {
            grid-area: 1/1/2/2;
            z-index: 0;
        }
        .sans-gluten-default {
            grid-area: 3/1/4/2;
            z-index: 0;
        }
        .fait-maison-default {
            grid-area: 5/1/6/2;
        }
        .one {
            grid-area: 2/1/3/2;
        }
        .two {
            grid-area: 4/1/5/2;
        }
        .three {
            grid-area: 6/1/7/2;
        }
    
     
    .box-container_nos-mochis {
        grid-template-columns: repeat(2, clamp(14.2rem, 42.857vw + 0.486rem, 26.2rem));
        grid-template-rows: clamp(14.2rem, 42.857vw + 0.486rem, 26.2rem) 1.6rem clamp(14.2rem, 42.857vw + 0.486rem, 26.2rem) 1.6rem
        clamp(14.2rem, 42.857vw + 0.486rem, 26.2rem) 1.6rem clamp(14.2rem, 42.857vw + 0.486rem, 26.2rem) 1.6rem;
        gap:1.2rem;
        width: fit-content;
        height: fit-content;
        align-items: center;
        justify-items: center;
        grid-template-areas: 
        'one two'
        'titre1 title2'
        'three four'
        'title3 title4'
        'five six'
        'title5 title6'
        'seven eight'
        'title7 title8';
    }
    .matcha-decoupe, .matcha {
        grid-area: one;
    }
    .sesame-decoupe, .sesame {
        grid-area: two;
    }
    .caramel-decoupe, .caramel {
        grid-area: three;
    }
    .kinako-decoupe, .kinako {
        grid-area: four;
    }
    .ananas-decoupe, .ananas{
        grid-area: five;
    }
    .framboise-decoupe, .framboise{
        grid-area: six;
    }
    .hojicha-decoupe, .hojicha{
        grid-area: seven;
    }
    .harico-decoupe, .harico{
        grid-area: eight;
    }

    .matcha-decoupe, .sesame-decoupe,.caramel-decoupe,.kinako-decoupe,
    .ananas-decoupe, .framboise-decoupe,.hojicha-decoupe,.harico-decoupe {
        width: clamp(14.2rem, 42.857vw + 0.486rem, 26.2rem);
        height: clamp(14.2rem, 42.857vw + 0.486rem, 26.2rem);
}
    .matcha, .sesame, .caramel, .kinako, .ananas, .framboise, .hojicha, .harico{
        width: clamp(16.2rem, 42.857vw + 2.486rem, 28.2rem);
        height: clamp(16.2rem, 42.857vw + 2.486rem, 28.2rem);
    
}
    .grid-container {
        grid-template-columns: clamp(29.6rem, 85.714vw + 2.171rem, 53.6rem);
        grid-template-rows: 
        clamp(29.6rem, 85.714vw + 2.171rem, 53.6rem)  clamp(29.6rem, 85.714vw + 2.171rem, 53.6rem) 
        clamp(29.6rem, 85.714vw + 2.171rem, 53.6rem)  clamp(29.6rem, 85.714vw + 2.171rem, 53.6rem) ;
        height: fit-content;
        width: fit-content;
        grid-template-areas: 
        'one'
        'two'
        'three'
        'four';

    }
    .grid-container > img {
        width: clamp(29.6rem, 85.714vw + 2.171rem, 53.6rem);
        height: clamp(29.6rem, 85.714vw + 2.171rem, 53.6rem);
        justify-self: center;
        align-self: center;
        }
        .histoire-default, .histoire {
            grid-area: one;
        }
        .tradition-default, .tradition {
            grid-area: three;
        }
        h2 {
            text-align: center;
          }
        h3 {
            text-align: center;
            margin-bottom: 2vh;
        }
        .text-wrapper > p {
            text-align: center;
        }
}
    
    
@media screen and (max-width: 375px){

    #hero {
        background: url("./img/hero-mobile.jpg") no-repeat center center;
        background-size: cover;
}
    .client_hero {
         width: 7.2rem;
         height: 9.6rem;
    }

    
}