/* =========================================================
   RYNA KIDS ARTICLE
========================================================= */

.ryna-kids-page {
    margin: 0;
    padding: 0;

    background: #fff4f7;

    color: #171313;
}


/* =========================================================
   ARTICLE HEADER
========================================================= */

.kids-article-header {
    width: 100%;

    padding: 30px 24px 48px;

    background: #fff4f7;

    box-sizing: border-box;
}


.kids-article-header-inner {
    width: 100%;

    max-width: 660px;

    margin: 0 auto;
}


.kids-article-category {
    margin-bottom: 14px;

    font-size: 14px;

    line-height: 1.4;

    color: #817773;
}


.kids-article-header h1 {
    margin: 0 0 24px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(46px, 5vw, 62px);

    line-height: 1.05;

    font-weight: 400;

    letter-spacing: -0.025em;

    color: #171313;
}


.kids-article-intro {
    max-width: 650px;

    margin: 0;

    font-size: 17px;

    line-height: 1.65;

    color: #383331;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.kids-hero-image {
    width: 100%;

    max-width: 850px;

    margin: 0 auto;

    overflow: hidden;
}


.kids-hero-image img { 
    display: block; 
    width: 100%; 
    height: auto; 
    object-fit: cover;

    transform: scale(1);

    animation: kidsHeroZoom 8s ease-in-out infinite;
}


/* =========================================================
   HERO ZOOM ANIMATION
========================================================= */

@keyframes kidsHeroZoom {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }

}


/* =========================================================
   ARTICLE CONTENT
========================================================= */

.kids-article-content {
    width: 100%;

    max-width: 532px;

    margin: 0 auto;

    padding: 64px 0 80px;

    box-sizing: border-box;
}


.kids-article-content p {
    margin: 0 0 42px;

    font-size: 17px;

    line-height: 1.55;

    color: #201c1b;
}


.kids-article-content h2 {
    margin: 52px 0 20px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 27px;

    line-height: 1.25;

    font-weight: 400;

    color: #171313;
}


/* =========================================================
   BACK TO DISCOVER
========================================================= */

.kids-article-back {
    margin-top: 72px;

    padding-top: 38px;

    border-top:
        1px solid
        rgba(23, 19, 19, 0.12);
}


.kids-article-back a {
    display: inline-block;

    color: #756b68;

    text-decoration: none;

    font-size: 14px;

    transition: color 0.2s ease;
}


.kids-article-back a:hover {
    color: #171313;
}


/* =========================================================
   MORE FROM THE JOURNAL
   FULL WIDTH
========================================================= */

.kids-more-journal {
    width: 100vw;

    max-width: none;

    margin-left: 50%;

    transform: translateX(-50%);

    padding: 72px 5vw 100px;

    background: #fbf5ef;

    box-sizing: border-box;
}


.kids-more-journal-inner {
    width: 100%;

    max-width: 1400px;

    margin: 0 auto;
}


/* =========================================================
   TITLE
========================================================= */

.kids-more-journal-inner > h2 {
    margin: 0 0 32px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 27px;

    line-height: 1.2;

    font-weight: 400;

    color: #171313;
}


/* =========================================================
   GRID
========================================================= */

.kids-journal-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 36px;
}


/* =========================================================
   CARD
========================================================= */

.kids-journal-card {
    width: 100%;

    min-width: 0;
}


/* =========================================================
   IMAGE
========================================================= */

.kids-journal-image {
    display: block;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #eee8e5;
}


.kids-journal-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.45s ease;
}


.kids-journal-image:hover img {
    transform: scale(1.03);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.kids-journal-content {
    padding-top: 14px;
}


.kids-journal-category {
    margin-bottom: 8px;

    font-size: 12px;

    line-height: 1.4;

    color: #817773;
}


.kids-journal-content h3 {
    margin: 0 0 10px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 19px;

    line-height: 1.3;

    font-weight: 400;

    color: #171313;
}


.kids-journal-content p {
    margin: 0 0 15px;

    font-size: 14px;

    line-height: 1.65;

    color: #625b58;
}


/* =========================================================
   READ STORY
========================================================= */

.kids-journal-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #625b58;

    text-decoration: none;

    font-size: 13px;
}


.kids-journal-link span {
    transition:
        transform 0.2s ease;
}


.kids-journal-link:hover {
    color: #171313;
}


.kids-journal-link:hover span {
    transform: translateX(4px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .kids-article-header {
        padding:
            30px
            20px
            42px;
    }


    .kids-article-header h1 {
        font-size: 42px;
    }


    .kids-article-intro {
        font-size: 16px;
    }


    .kids-article-content {
        padding:
            48px
            24px
            70px;
    }


    .kids-article-content p {
        font-size: 17px;

        line-height: 1.6;
    }


    .kids-article-content h2 {
        font-size: 26px;
    }


    .kids-more-journal {
        width: 100%;

        margin-left: 0;

        transform: none;

        padding:
            55px
            20px
            70px;
    }


    .kids-journal-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

}