/*----------
| Global
----------*/

#page-kids {
    background-color: #fffa97;
}

#page-kids h1 {
    font-family: "Antique Olive Nord", Heebo, Arial, sans-serif;
    color: #fff;
    text-align: center;
    margin-bottom: 0;
}

#page-kids h2,
#page-kids h3,
#page-kids h4,
#page-kids p,
#page-kids a {
    font-family: "Helvetica", Heebo, Arial, sans-serif;
    font-weight: 400;
    color: #333132;
}

#page-kids h2.bolder,
#page-kids h3.bolder {
    font-weight: 700;
}

#page-kids .kids-intro h2.bolder {
    margin-top: clamp(5rem, 3.8854rem + 5.0955vw, 10rem);
    margin-bottom: clamp(5rem, 3.8854rem + 5.0955vw, 10rem);
    margin-left: 0;
    margin-right: 0;
}

#page-kids img {
    width: 100%;
}

#page-kids .btn-kids {
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    background-color: #fff;
    border: 2px solid #333132;
}

/* hero header*/
#page-kids .hero-kids {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url(../images/Editorial/Edito/Kids/american-vintage-cool-kids.jpg?$staticlink$)no-repeat center center;
    background-size: cover;
    min-height: clamp(25rem, 16.9885rem + 36.6242vw, 60.9375rem);
}

#page-kids .hero-kids h2 {
    color: #fff;
    text-align: center;
}

/*kids-intro*/

#page-kids .kids-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: clamp(3.75rem, 2.3567rem + 6.3694vw, 10rem);
    padding-bottom: clamp(3.75rem, 2.3567rem + 6.3694vw, 10rem);
    padding-left: clamp(1.25rem, -0.7006rem + 8.9172vw, 10rem);
    padding-right: clamp(1.25rem, -0.7006rem + 8.9172vw, 10rem);

}

#page-kids .kids-intro h2 {
    padding-bottom: 90px;
}

#page-kids .kids-intro p {
    padding-bottom: 50px;
}

#page-kids .kids-intro .container-img {
    margin-top: clamp(5rem, 3.8854rem + 5.0955vw, 10rem);
    margin-bottom: clamp(5rem, 3.8854rem + 5.0955vw, 10rem);
    margin-left: 0;
    margin-right: 0;
}

#page-kids .kids-intro h4 {
    margin-bottom: 85px;
}

#page-kids .kids-intro .btn-kids {
    margin-top: clamp(1.25rem, -0.1433rem + 6.3694vw, 7.5rem);
}

#page-kids .kids-intro .container-iframe {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
    margin-top: clamp(0.625rem, -1.465rem + 9.5541vw, 10rem);
}

#page-kids .kids-intro .responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/*kids-collection*/

#page-kids .kids-collection .kids-collection-gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

#page-kids .kids-collection h2.bolder {
    margin-top: clamp(5rem, 3.8854rem + 5.0955vw, 10rem);
    margin-bottom: 65px;
    text-align: center;
}

#page-kids .kids-collection .kids-gallery-bloc {
    position: relative;
    text-align: center;
    color: white;
    line-height: 0;
}

#page-kids .kids-collection .kids-gallery-bloc h4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-transform: uppercase;
}

#page-kids .container-kids-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    margin-top: 0;
    margin-bottom: clamp(5rem, 3.8854rem + 5.0955vw, 10rem);
    margin-left: clamp(2.5rem, 2.0123rem + 2.2293vw, 4.6875rem);
    margin-right: clamp(2.5rem, 2.0123rem + 2.2293vw, 4.6875rem);


}

#page-kids .container-kids-cards .kids-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#page-kids h3.bolder {
    margin-bottom: clamp(2.5rem, 1.9427rem + 2.5478vw, 5rem);
}

/*kids-infos*/

#page-kids .kids-infos h4 {
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
}

#page-kids .kids-infos .container-gif {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: clamp(5rem, 3.8854rem + 5.0955vw, 10rem);
    margin-bottom: clamp(5rem, 3.8854rem + 5.0955vw, 10rem);
    margin-left: 0;
    margin-right: 0;
}

#page-kids .kids-infos .container-gif img {
    max-width: 380px;
}

#page-kids .kids-infos .kids-clothes-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.625rem, -0.0717rem + 3.1847vw, 3.75rem);
    margin-top: 0;
    margin-bottom: 0;
    margin-left: clamp(0.625rem, -0.629rem + 5.7325vw, 6.25rem);
    margin-right: clamp(0.625rem, -0.629rem + 5.7325vw, 6.25rem);
}

/*kids-faq*/

#page-kids .kids-faq {
    padding-bottom: clamp(5rem, 3.8854rem + 5.0955vw, 10rem);
}

#page-kids .kids-faq h2.bolder {
    margin-top: clamp(5rem, 3.8854rem + 5.0955vw, 10rem);
    margin-bottom: clamp(5rem, 3.8854rem + 5.0955vw, 10rem);
    margin-left: 0;
    margin-right: 0;
    text-align: center;
}

#page-kids .kids-faq .kids-questions {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: clamp(2.5rem, -0.7046rem + 14.6497vw, 16.875rem);
    margin-right: clamp(2.5rem, -0.7046rem + 14.6497vw, 16.875rem);
}

#page-kids .kids-faq .kids-question {
    margin-bottom: 80px;
}

#page-kids .kids-faq .kids-question h3 {
    margin-bottom: clamp(1.875rem, 1.457rem + 1.9108vw, 3.75rem);
}

/*----------------
| Medias queries
------------------*/

@media screen and (min-width : 1920px) {

    #page-kids h1 {
        font-size: 120px;
    }

    #page-kids h2 {
        font-size: 50px;
    }

    #page-kids h3,
    #page-kids h4 {
        font-size: 50px;
    }

    #page-kids p {
        font-size: 30px;
    }

    #page-kids .btn-kids {
        font-size: 30px;
        width: 720px;
        height: 160px;
    }

    #page-kids .kids-infos h4 {
        margin-left: 270px;
        margin-right: 270px;
    }

    #page-kids .kids-collection .kids-gallery-bloc h4 {
        font-size: 30px;
    }

    #page-kids .kids-faq .kids-question h3 {
        font-size: 50px;
    }
}

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

    #page-kids h1 {
        font-size: clamp(5rem, 4.4427rem + 2.5478vw, 7.5rem);
    }

    #page-kids h2 {
        font-size: clamp(2.5rem, 2.3607rem + 0.6369vw, 3.125rem);
    }

    #page-kids h3,
    #page-kids h4 {
        font-size: clamp(1.875rem, 1.5963rem + 1.2739vw, 3.125rem);
    }

    #page-kids p {
        font-size: clamp(1.5625rem, 1.4928rem + 0.3185vw, 1.875rem);
    }

    #page-kids .btn-kids {
        font-size: clamp(1.5625rem, 1.4928rem + 0.3185vw, 1.875rem);
        width: clamp(15rem, 8.3121rem + 30.5732vw, 45rem);
        height: clamp(4.0625rem, 2.7389rem + 6.051vw, 10rem);
    }

    #page-kids .kids-infos h4 {
        margin-left: clamp(2.5rem, -0.7046rem + 14.6497vw, 16.875rem);
        margin-right: clamp(2.5rem, -0.7046rem + 14.6497vw, 16.875rem);
    }

    #page-kids .kids-collection .kids-gallery-bloc h4 {
        font-size: clamp(1.5625rem, 1.4928rem + 0.3185vw, 1.875rem);
    }

    #page-kids .kids-faq .kids-question h3 {
        font-size: clamp(1.875rem, 1.5963rem + 1.2739vw, 3.125rem);
    }
}

@media screen and (max-width : 480px) {
    #page-kids .kids-collection .kids-collection-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    #page-kids .container-kids-cards {
        grid-template-columns: 1fr;
    }

    #page-kids .kids-infos .kids-clothes-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}