/* =========================================================
   ADI YOGPEETH — SCHOOL EXPERIENCE
   ========================================================= */

.course-experience-section {

    padding:
        110px
        0;

    background:
        var(--color-forest);

}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.course-experience {

    display:
        grid;

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

    gap:
        80px;

    align-items:
        center;

}


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

.course-experience__visual {

    position:
        relative;

    min-height:
        620px;

    overflow:
        hidden;

    background:
        rgba(255,255,255,0.06);

    border-radius:
        var(--radius-md);

}


.course-experience__visual img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    min-height:
        620px;

    object-fit:
        cover;

}


.course-experience__placeholder {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        620px;

    color:
        rgba(255,255,255,0.55);

    font-size:
        0.6rem;

    letter-spacing:
        var(--tracking-wide);

    text-transform:
        uppercase;

}


.course-experience__visual-caption {

    position:
        absolute;

    right:
        18px;

    bottom:
        18px;

    left:
        18px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        12px 14px;

    color:
        var(--color-white);

    background:
        rgba(15,39,32,0.78);

    border:
        1px solid
        rgba(255,255,255,0.15);

    border-radius:
        var(--radius-sm);

    backdrop-filter:
        blur(10px);

    font-size:
        0.5rem;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;

}


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

.course-experience__content {

    padding-right:
        4%;

}


.course-experience__content
.course-section-eyebrow {

    color:
        var(--color-gold);

}


.course-experience__content h2 {

    max-width:
        650px;

    margin:
        0;

    color:
        var(--color-white);

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2.3rem,
            4vw,
            4rem
        );

    font-weight:
        var(--font-weight-medium);

    line-height:
        1.05;

    letter-spacing:
        -0.035em;

}


.course-experience__description {

    max-width:
        600px;

    margin:
        25px 0 40px;

    color:
        rgba(255,255,255,0.68);

    font-size:
        0.72rem;

    line-height:
        1.85;

}


/* =========================================================
   FEATURES
   ========================================================= */

.course-experience__features {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        0;

    border-top:
        1px solid
        rgba(255,255,255,0.14);

}


.experience-feature {

    display:
        grid;

    grid-template-columns:
        32px
        1fr;

    gap:
        12px;

    padding:
        22px 15px 22px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.14);

}


.experience-feature:nth-child(even) {

    padding-left:
        25px;

    border-left:
        1px solid
        rgba(255,255,255,0.14);

}


.experience-feature__icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        28px;

    height:
        28px;

    color:
        var(--color-gold);

    border:
        1px solid
        rgba(213,181,108,0.45);

    border-radius:
        50%;

    font-size:
        0.65rem;

}


.experience-feature h3 {

    margin:
        0 0 6px;

    color:
        var(--color-white);

    font-family:
        var(--font-display);

    font-size:
        0.95rem;

    font-weight:
        var(--font-weight-medium);

}


.experience-feature p {

    margin:
        0;

    color:
        rgba(255,255,255,0.55);

    font-size:
        0.58rem;

    line-height:
        1.65;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .course-experience {

        gap:
            45px;

    }


    .course-experience__visual,
    .course-experience__visual img {

        min-height:
            500px;

    }

}


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

@media (max-width: 767px) {

    .course-experience-section {

        padding:
            70px
            0;

    }


    .course-experience {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .course-experience__visual,
    .course-experience__visual img {

        min-height:
            390px;

    }


    .course-experience__content {

        padding:
            0;

    }


    .course-experience__content h2 {

        font-size:
            clamp(
                2rem,
                9vw,
                2.8rem
            );

    }


    .course-experience__description {

        margin-bottom:
            30px;

        font-size:
            0.68rem;

    }


    .course-experience__features {

        grid-template-columns:
            1fr;

    }


    .experience-feature,
    .experience-feature:nth-child(even) {

        padding:
            18px 0;

        border-left:
            0;

    }


    .course-experience__visual-caption {

        flex-direction:
            column;

        gap:
            4px;

    }

}