.gammes-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    background-color: #EEE7DF;
    max-width: 1300px;
    margin: auto;
    margin-top: 10%;
    padding: 0 7% 0 0;

    font-size: 18px;
    color: #2E2E2E;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.5em;

    .gammes-intro {
        grid-column: 2;
        grid-row: 1;
        padding-top: 100px ;
        h2{

            font-family: 'Afacad', sans-serif;
            text-transform: uppercase;
            font-size: clamp(2rem, 1.3235rem + 2.7059vw, 5.653rem);
            color: #2E2E2E;
            margin-bottom: 40px;
        }
        p{
            margin-bottom: 40px;
        }
        .btn-boutique.gammes{
            font-size: 20px;
            letter-spacing: 2px;
            font-family: 'Roboto', sans-serif;
            text-transform: uppercase;
            color: #000000;
            background-color: #FFFFFF;
            border: 1px solid #C18B52;
            cursor: pointer;
            padding: 9px 25px ;
            transition: all 0.4s ease-in-out;
            font-weight: 400;
        }
        .btn-boutique.gammes:hover{
            color: #FFFFFF;
            background-color: #C18B52;
        }
    }

    .gamme-wrapper{
        grid-column: 1 / span 2;
        grid-row: 2;
    }
    .gamme-item{
        position: relative;
        grid-template-columns: 1fr 1fr;
        display: none;
        padding: 100px 0 50px 0;
        .gamme-image{
            position: absolute;
            bottom: 0;
            left: -6%;
            height: 250%;
            grid-column: 1;
            aspect-ratio: 488 / 782;
            object-fit: cover;
            max-height: 782px;
        }
        .gamme-infos {
            grid-column: 2;

            font-size: 16px;
            h3:before {
                content: '';
                position: absolute;
                top: 0.5em;
                left: -60px;
                width: 50px;
                height: 6px;
                background-color: #C18B52;
            }
            h3{
                position: relative;
                font-size: clamp(1.4375rem, 0.9633rem + 1.8967vw, 3.998rem);
                line-height: 1em !important;
                font-family: 'Afacad', sans-serif;
                text-transform: uppercase;
                font-weight: 400;
                color: #2E2E2E;
                span.sup-text-gamme {
                    position: absolute;
                    text-transform: lowercase;
                    bottom: 100%;
                    left: -4%;
                    font-family: 'Satisfy', cursive;
                }

            }

            p{
                max-width: 420px;
            }

        }


    }
    .gamme-item.active {
        display: grid;
        opacity: 1;
    }




}
.gammes-links {
    grid-row: 3;
    grid-column: 1 / span 2;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 40px 0;
    max-width: 1300px;
    margin: auto;
    background-color: #EEE7DF;

    button {
        border: none;
        padding: 10px 20px;
        border-bottom: 3px solid transparent;
        background: none;
        text-transform: uppercase;
        font-size: 16px;
        font-family: 'Brandon Grotesque', sans-serif;
        transition: all 0.4s ease-in-out;
        cursor: pointer;
    }
    button.active{
        border-bottom: 3px solid #000000;
    }
}

@media screen and (max-width: 1140px) {
    .gammes-wrapper {
        padding: 0px 7% 0px 7%;
        .gammes-intro {
            grid-area: 1 / span 2;
            padding-top: 100px;
        }
        .gamme-item{
            .gamme-image{
                position: relative;
                height: 100%;
                grid-column: 1;
                aspect-ratio: 488 / 782;
                object-fit: cover;
            }
            .gamme-infos {
                p {
                    max-width: 100%;
                }
            }
        }

        .gamme-item.active {
            display: grid;
            grid-template-columns: 1fr 2fr;
            opacity: 1;
            column-gap: 60px;
            align-items: center;
        }
    }
}



/*key numbers*/
div#key_numbers{

    display: flex;
    width: auto;
    justify-content: center;
    gap: 15px;
    align-items: center;

    .key-numbers-decoration {
        display: flex;
        justify-content: center;
        gap: 15px;
        .labels_kn{
            max-height: 158px;
            object-fit: contain;
        }
    }

    .key-numbers-wrapper {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        .key-numbers-item {
            display: flex;
            flex-direction: column;
            min-width: calc(130px + 2em);
            height: calc(130px + 2em);
            align-items: center;
            aspect-ratio: 1 / 1;
            border: 3px solid #C8853E;
            border-radius: 200px;
            padding: 1em;
            justify-content: center;
            text-align: center;
        }

        .kn,.kn_title{
            font-family: 'Bebas Neue', sans-serif;
            text-transform: uppercase;
            font-weight: 800;
            color: #2B2E34;
            line-height: 1em;
            padding:0
        }
        .kn{
            font-size: clamp(2rem, 1.3235rem + 2.7059vw, 5rem) !important;
        }
        .kn_title{
            font-size: clamp(1.0625rem, 0.8889rem + 0.6944vw, 1.5rem) !important;
        }

    }

}

@media screen and (max-width: 1100px) {
   .chevrons_kn{
       display: none;
   }

    .key-numbers-decoration {
        flex-direction: column;
    }

}
@media screen and (max-width: 700px) {
    div#key_numbers {
        flex-direction: column;
    }
    .key-numbers-wrapper {
        justify-content: center;
    }
    .key-numbers-decoration {
        flex-direction: column;
    }

}


/*shortcode swiper*/

/*.carrousel-swiper-container {*/
/*    overflow: visible;*/
/*    padding: 0;*/
/*}*/

/*.carrousel-swiper {*/
/*    overflow: visible;*/
/*}*/

/*.carrousel-swiper .swiper-wrapper {*/
/*    align-items: center;*/
/*}*/

/*.carrousel-swiper .swiper-slide {*/
/*    width: auto;*/
/*    height: 300px;*/
/*    border-radius: 12px;*/
/*    overflow: hidden;*/
/*}*/

/*.carrousel-swiper .swiper-slide img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*    object-position: center;*/
/*    display: block;*/
/*}*/

/*!* Responsive *!*/
/*@media (max-width: 768px) {*/
/*    .carrousel-swiper .swiper-slide {*/
/*        height: 250px;*/
/*    }*/
/*}*/

/*@media (max-width: 480px) {*/
/*    .carrousel-swiper .swiper-slide {*/
/*        height: 200px;*/
/*    }*/
/*    .carrousel-swiper-container {*/
/*        padding: 0 10px;*/
/*    }*/
/*}*/