/* =========================================================
   ADI YOGPEETH
   500 HOUR YOGA TEACHER TRAINING
   PHASE JOURNEY
   PREMIUM / SCREENSHOT-MATCHED DESIGN
   ========================================================= */


/* =========================================================
   01. VARIABLES
   ========================================================= */

.course-500-phases {

    --five-green:
        #0d542d;

    --five-green-dark:
        #083e21;

    --five-green-soft:
        #eef5ef;

    --five-green-border:
        #c8d8ca;

    --five-gold:
        #e29a00;

    --five-gold-dark:
        #c97f00;

    --five-gold-soft:
        #fff7e8;

    --five-gold-border:
        #ead6a8;

    --five-text:
        #1d2c23;

    --five-muted:
        #68716b;

    --five-border:
        #dce3dd;

    --five-white:
        #ffffff;

    --five-radius:
        9px;

    --five-shadow:
        0 4px 16px rgba(23, 52, 36, 0.07);

    color:
        var(--five-text);

}


/* =========================================================
   02. RESET
   ========================================================= */

.course-500-phases *,
.course-500-phases *::before,
.course-500-phases *::after {

    box-sizing:
        border-box;

}


.course-500-phases h1,
.course-500-phases h2,
.course-500-phases h3,
.course-500-phases p {

    margin:
        0;

}


.course-500-phases a {

    color:
        inherit;

    text-decoration:
        none;

}


/* =========================================================
   03. CONTAINER
   ========================================================= */

.course-500-phases
.container--xxl {

    width:
        min(
            calc(100% - 48px),
            1380px
        );

    margin-left:
        auto;

    margin-right:
        auto;

}


/* =========================================================
   04. TRANSFORMATION JOURNEY
   ========================================================= */

.course-500-transform {

    padding:
        22px 0 27px;

    background:
        #ffffff;

    border-bottom:
        1px solid #e3e7e3;

}


.course-500-transform__heading {

    margin-bottom:
        15px;

    text-align:
        center;

}


.course-500-transform__heading span {

    color:
        var(--five-green);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


/* =========================================================
   05. TRANSFORMATION STEPS
   ========================================================= */

.course-500-transform__steps {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        20px;

}


.course-500-transform__step {

    width:
        150px;

    min-height:
        82px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #cdd8ce;

    border-radius:
        999px;

    background:
        #ffffff;

    text-align:
        center;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.course-500-transform__step:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 6px 18px rgba(0,0,0,.07);

}


.course-500-transform__step--active {

    border:
        1px solid var(--five-green);

    background:
        var(--five-green);

    color:
        #ffffff;

    box-shadow:
        0 6px 18px rgba(13,84,45,.16);

}


.course-500-transform__step--break {

    border-color:
        #d7d7d7;

}


.course-500-transform__step--advanced {

    border-color:
        #ebd19c;

    background:
        #fffaf0;

}


.course-500-transform__phase {

    margin-bottom:
        3px;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .08em;

}


.course-500-transform__step strong {

    font-family:
        Georgia,
        serif;

    font-size:
        21px;

    line-height:
        1;

}


.course-500-transform__step small {

    margin-top:
        4px;

    font-size:
        10px;

    font-weight:
        600;

}


.course-500-transform__step--active small {

    color:
        rgba(255,255,255,.82);

}


.course-500-transform__arrow {

    color:
        var(--five-green);

    font-family:
        Arial,
        sans-serif;

    font-size:
        30px;

    font-weight:
        300;

}


.course-500-transform__flower {

    margin-bottom:
        2px;

    color:
        #777;

    font-size:
        14px;

}


/* =========================================================
   06. PHASE CARD
   ========================================================= */

.course-500-phase-card {

    padding:
        16px 0 0;

}


.course-500-phase-card--one {

    background:
        #eef5ef;

}


.course-500-phase-card--two {

    background:
        #fff7e8;

    padding-bottom:
        16px;

}


/* =========================================================
   07. PHASE MAIN LAYOUT
   ========================================================= */

.course-500-phase-layout {

    display:
        grid;

    grid-template-columns:
        18% minmax(0, 41%) minmax(0, 41%);

    column-gap:
        8px;

    min-height:
        365px;

    border:
        1px solid var(--five-green-border);

    border-radius:
        9px 9px 0 0;

    overflow:
        hidden;

    background:
        rgba(255,255,255,.30);

}


/* Phase 02 */

.course-500-phase-card--two
.course-500-phase-layout {

    border-color:
        var(--five-gold-border);

}


/* =========================================================
   08. PHASE IDENTITY
   ========================================================= */

.course-500-phase-identity {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    padding:
        22px 20px 24px;

    border-right:
        1px solid var(--five-green-border);

    text-align:
        center;

}


.course-500-phase-card--two
.course-500-phase-identity {

    border-color:
        var(--five-gold-border);

}


/* =========================================================
   09. PHASE BADGE
   ========================================================= */

.course-500-phase-identity__badge {

    width:
        72px;

    min-height:
        94px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;

    margin-bottom:
        16px;

    background:
        var(--five-green);

    color:
        #ffffff;

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 87%,
            50% 100%,
            0 87%
        );

}


.course-500-phase-card--two
.course-500-phase-identity__badge {

    background:
        var(--five-gold);

}


.course-500-phase-identity__badge span {

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .08em;

}


.course-500-phase-identity__badge strong {

    margin-top:
        2px;

    font-family:
        Georgia,
        serif;

    font-size:
        36px;

    line-height:
        .95;

}


.course-500-phase-identity__badge i {

    margin-top:
        6px;

    font-style:
        normal;

    font-size:
        17px;

}


.course-500-phase-identity h2 {

    color:
        var(--five-green);

    font-family:
        Georgia,
        serif;

    font-size:
        24px;

    line-height:
        1.1;

}


.course-500-phase-card--two
.course-500-phase-identity h2 {

    color:
        var(--five-gold-dark);

}


.course-500-phase-identity p {

    max-width:
        190px;

    margin-top:
        12px;

    color:
        var(--five-muted);

    font-size:
        11px;

    line-height:
        1.6;

}


.course-500-phase-identity__duration {

    margin-top:
        auto;

    padding-top:
        18px;

}


.course-500-phase-identity__duration strong {

    display:
        block;

    color:
        var(--five-green);

    font-family:
        Georgia,
        serif;

    font-size:
        27px;

    line-height:
        1;

}


.course-500-phase-card--two
.course-500-phase-identity__duration strong {

    color:
        var(--five-gold-dark);

}


.course-500-phase-identity__duration span {

    display:
        block;

    margin-top:
        6px;

    font-size:
        9px;

    font-weight:
        700;

}


/* =========================================================
   10. CONTENT CARDS
   ========================================================= */

.course-500-content-card {

    min-width:
        0;

    margin:
        16px 12px;

    padding:
        0 12px 13px;

    border:
        1px solid var(--five-border);

    border-radius:
        8px;

    background:
        rgba(255,255,255,.96);

    box-shadow:
        var(--five-shadow);

}


/* =========================================================
   11. CONTENT HEADER
   ========================================================= */

.course-500-content-card__heading {

    display:
        flex;

    align-items:
        center;

    min-height:
        52px;

    padding:
        0 5px;

}


.course-500-content-card__heading div {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

}


.course-500-content-card__heading span {

    color:
        var(--five-green);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .04em;

}


.course-500-phase-card--two
.course-500-content-card__heading span {

    color:
        var(--five-gold-dark);

}


.course-500-content-card__heading small {

    color:
        #777;

    font-size:
        9px;

}


/* =========================================================
   12. CURRICULUM
   ========================================================= */

.course-500-curriculum-list {

    border:
        1px solid #e0e5e1;

    border-radius:
        7px;

    overflow:
        hidden;

}


.course-500-curriculum-row {

    border-bottom:
        1px solid #edf0ed;

    background:
        #ffffff;

}


.course-500-curriculum-row:last-child {

    border-bottom:
        0;

}


.course-500-curriculum-row summary {

    display:
        grid;

    grid-template-columns:
        29px minmax(0,1fr) 20px;

    align-items:
        center;

    gap:
        9px;

    min-height:
        34px;

    padding:
        0 10px;

    list-style:
        none;

    cursor:
        pointer;

}


.course-500-curriculum-row summary::-webkit-details-marker {

    display:
        none;

}


.course-500-row-number {

    width:
        20px;

    height:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--five-green);

    color:
        #ffffff;

    font-size:
        7px;

    font-weight:
        800;

}


.course-500-phase-card--two
.course-500-row-number {

    background:
        var(--five-gold);

}


.course-500-curriculum-row summary strong {

    min-width:
        0;

    overflow:
        hidden;

    color:
        #243028;

    font-size:
        10px;

    font-weight:
        650;

    line-height:
        1.35;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.course-500-row-arrow {

    color:
        var(--five-green);

    font-size:
        12px;

    transition:
        transform .2s ease;

}


.course-500-phase-card--two
.course-500-row-arrow {

    color:
        var(--five-gold-dark);

}


.course-500-curriculum-row[open]
.course-500-row-arrow {

    transform:
        rotate(180deg);

}


.course-500-row-description {

    padding:
        5px 30px 11px 44px;

    color:
        var(--five-muted);

    font-size:
        9px;

    line-height:
        1.55;

}


/* =========================================================
   13. VIEW FULL LINK
   ========================================================= */

.course-500-view-link {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding-top:
        13px;

    color:
        var(--five-green);

    font-size:
        9px;

    font-weight:
        800;

}


.course-500-phase-card--two
.course-500-view-link {

    color:
        var(--five-gold-dark);

}


.course-500-view-link span {

    font-size:
        15px;

    line-height:
        .8;

}


/* =========================================================
   14. DAILY SCHEDULE
   ========================================================= */

.course-500-schedule-list {

    max-height:
        300px;

    overflow-y:
        auto;

    border:
        1px solid #e0e5e1;

    border-radius:
        7px;

    background:
        #ffffff;

}


.course-500-schedule-list::-webkit-scrollbar {

    width:
        4px;

}


.course-500-schedule-list::-webkit-scrollbar-thumb {

    background:
        #c6d0c8;

    border-radius:
        20px;

}


.course-500-schedule-row {

    display:
        grid;

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

    align-items:
        center;

    min-height:
        32px;

    padding:
        0 9px;

    border-bottom:
        1px solid #edf0ed;

}


.course-500-schedule-row:last-child {

    border-bottom:
        0;

}


.course-500-schedule-row strong {

    color:
        var(--five-green);

    font-size:
        9px;

    font-weight:
        800;

}


.course-500-phase-card--two
.course-500-schedule-row strong {

    color:
        var(--five-gold-dark);

}


.course-500-schedule-row span {

    color:
        #4d564f;

    font-size:
        9px;

    line-height:
        1.3;

}


/* =========================================================
   15. EMPTY STATE
   ========================================================= */

.course-500-empty {

    padding:
        28px 12px;

    color:
        var(--five-muted);

    font-size:
        10px;

    line-height:
        1.5;

    text-align:
        center;

}


/* =========================================================
   16. PHASE DURATION BAR
   ========================================================= */

.course-500-phase-bar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        30px;

    padding:
        0 14px;

    background:
        var(--five-green);

    color:
        #ffffff;

    border-radius:
        0 0 8px 8px;

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        .025em;

}


.course-500-phase-bar strong {

    font-weight:
        800;

}


.course-500-phase-bar i {

    margin:
        0 5px;

    opacity:
        .55;

    font-style:
        normal;

}


.course-500-phase-card--two
.course-500-phase-bar {

    background:
        var(--five-gold);

}


/* =========================================================
   17. BREAK SECTION
   ========================================================= */

.course-500-break {

    padding:
        22px 0 25px;

    background:
        #ffffff;

    border-top:
        1px solid #e1e4e1;

    border-bottom:
        1px solid #e1e4e1;

}


.course-500-break__heading {

    max-width:
        800px;

    margin:
        0 auto 22px;

    text-align:
        center;

}


.course-500-break__heading > span {

    display:
        block;

    color:
        var(--five-green);

    font-family:
        Georgia,
        serif;

    font-size:
        21px;

    font-weight:
        700;

}


.course-500-break__heading h2 {

    display:
        none;

}


.course-500-break__heading h3 {

    margin-top:
        3px;

    color:
        var(--five-green);

    font-family:
        Georgia,
        serif;

    font-size:
        14px;

}


.course-500-break__heading p {

    max-width:
        680px;

    margin:
        7px auto 0;

    color:
        var(--five-muted);

    font-size:
        10px;

    line-height:
        1.6;

}


/* =========================================================
   18. BREAK GRID
   ========================================================= */

.course-500-break-grid {

    display:
        grid;

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

    gap:
        15px;

}


/* =========================================================
   19. BREAK ITEM
   ========================================================= */

.course-500-break-item {

    min-width:
        0;

    min-height:
        125px;

    display:
        grid;

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

    overflow:
        hidden;

    border:
        1px solid #dce1dc;

    border-radius:
        9px;

    background:
        #ffffff;

    box-shadow:
        0 3px 12px rgba(23,52,36,.05);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.course-500-break-item:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 7px 18px rgba(23,52,36,.08);

}


.course-500-break-item__content {

    position:
        relative;

    min-width:
        0;

    padding:
        15px 14px;

}


.course-500-break-item__number {

    position:
        absolute;

    top:
        10px;

    right:
        9px;

    color:
        rgba(13,84,45,.12);

    font-size:
        25px;

    font-weight:
        800;

}


.course-500-break-item h3 {

    max-width:
        calc(100% - 25px);

    color:
        var(--five-green);

    font-size:
        11px;

    line-height:
        1.3;

}


.course-500-break-item p {

    margin-top:
        6px;

    color:
        var(--five-muted);

    font-size:
        8px;

    line-height:
        1.5;

}


.course-500-break-item__link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    margin-top:
        8px;

    color:
        var(--five-green);

    font-size:
        8px;

    font-weight:
        800;

}


.course-500-break-item__link span {

    font-size:
        12px;

}


.course-500-break-item__image {

    min-width:
        0;

    overflow:
        hidden;

    background:
        #f0f2ee;

}


.course-500-break-item__image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .3s ease;

}


.course-500-break-item:hover
.course-500-break-item__image img {

    transform:
        scale(1.04);

}


/* =========================================================
   20. BREAK NOTE
   ========================================================= */

.course-500-break__note {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        13px;

}


.course-500-break__note > span {

    color:
        #707770;

    font-size:
        10px;

}


.course-500-break__note p {

    color:
        #5f675f;

    font-size:
        8px;

    line-height:
        1.45;

}


/* =========================================================
   21. 52 DAY JOURNEY
   ========================================================= */

.course-500-journey-summary {

    padding:
        25px 0 28px;

    background:
        #ffffff;

}


.course-500-journey-summary__heading {

    margin-bottom:
        15px;

    text-align:
        center;

}


.course-500-journey-summary__heading span {

    display:
        none;

}


.course-500-journey-summary__heading h2 {

    color:
        var(--five-green);

    font-family:
        Georgia,
        serif;

    font-size:
        20px;

    line-height:
        1.2;

}


/* =========================================================
   22. JOURNEY TIMELINE
   ========================================================= */

.course-500-journey-timeline {

    display:
        grid;

    grid-template-columns:
        minmax(80px,1fr)
        28px
        minmax(120px,1.35fr)
        28px
        minmax(105px,1.15fr)
        28px
        minmax(120px,1.35fr)
        28px
        minmax(80px,1fr);

    align-items:
        center;

    max-width:
        1180px;

    margin:
        0 auto;

}


.course-500-journey-node {

    min-height:
        75px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        8px;

    border:
        1px solid #d8e0d9;

    border-radius:
        8px;

    background:
        #f7faf7;

    text-align:
        center;

}


.course-500-journey-node--break {

    background:
        #ffffff;

    border-color:
        #d8d8d8;

}


.course-500-journey-node--two {

    background:
        #fffaf0;

    border-color:
        #ecd7aa;

}


.course-500-journey-node strong {

    color:
        var(--five-green);

    font-family:
        Georgia,
        serif;

    font-size:
        17px;

    line-height:
        1;

}


.course-500-journey-node--two strong {

    color:
        var(--five-gold-dark);

}


.course-500-journey-node span {

    margin-top:
        6px;

    color:
        #344039;

    font-size:
        8px;

    font-weight:
        700;

}


.course-500-journey-node small {

    margin-top:
        3px;

    color:
        #747b75;

    font-size:
        7px;

}


.course-500-journey-timeline > i {

    color:
        var(--five-green);

    font-size:
        19px;

    font-style:
        normal;

    text-align:
        center;

}


/* =========================================================
   23. JOURNEY STATS
   ========================================================= */

.course-500-journey-stats {

    display:
        grid;

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

    max-width:
        350px;

    margin:
        0 0 0 auto;

    border:
        1px solid #dce2dc;

    border-radius:
        7px;

    background:
        #ffffff;

}


.course-500-journey-stats > div {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        6px 8px;

    border-right:
        1px solid #e7eae7;

}


.course-500-journey-stats > div:last-child {

    border-right:
        0;

}


.course-500-journey-stats strong {

    color:
        var(--five-green);

    font-size:
        10px;

    line-height:
        1.1;

}


.course-500-journey-stats span {

    margin-top:
        3px;

    color:
        #6c746e;

    font-size:
        6px;

    line-height:
        1.25;

}


.course-500-journey-dates {

    margin-top:
        8px;

    color:
        #5d665f;

    font-size:
        8px;

    text-align:
        center;

}


.course-500-journey-dates b {

    margin:
        0 8px;

    color:
        #b0b5b0;

}


/* =========================================================
   24. LARGE DESKTOP
   ========================================================= */

@media (
    min-width: 1200px
) {

    .course-500-phase-layout {

        min-height:
            380px;

    }


    .course-500-content-card {

        margin:
            17px 13px;

    }


    .course-500-curriculum-row summary {

        min-height:
            35px;

    }


    .course-500-schedule-row {

        min-height:
            33px;

    }


    .course-500-break-item {

        min-height:
            130px;

    }

}


/* =========================================================
   25. TABLET
   ========================================================= */

@media (
    max-width: 1000px
) {

    .course-500-phase-layout {

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

        column-gap:
            0;

    }


    .course-500-phase-identity {

        grid-row:
            span 2;

    }


    .course-500-content-card {

        margin:
            10px 10px 10px 0;

    }


    .course-500-break-grid {

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

        gap:
            10px;

    }


    .course-500-journey-timeline {

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

    }


    .course-500-journey-timeline > i {

        font-size:
            14px;

    }

}


/* =========================================================
   26. MOBILE
   ========================================================= */

@media (
    max-width: 760px
) {

    .course-500-phases
    .container--xxl {

        width:
            calc(100% - 24px);

    }


    /* Transformation */

    .course-500-transform {

        padding:
            17px 0 20px;

    }


    .course-500-transform__heading {

        margin-bottom:
            12px;

    }


    .course-500-transform__steps {

        gap:
            7px;

    }


    .course-500-transform__step {

        width:
            105px;

        min-height:
            64px;

    }


    .course-500-transform__step strong {

        font-size:
            15px;

    }


    .course-500-transform__step small {

        font-size:
            8px;

    }


    .course-500-transform__arrow {

        font-size:
            21px;

    }


    /* Phase */

    .course-500-phase-card {

        padding-top:
            9px;

    }


    .course-500-phase-layout {

        grid-template-columns:
            1fr;

        min-height:
            0;

    }


    .course-500-phase-identity {

        display:
            grid;

        grid-template-columns:
            75px minmax(0,1fr) 70px;

        align-items:
            center;

        gap:
            10px;

        padding:
            14px;

        border-right:
            0;

        border-bottom:
            1px solid var(--five-green-border);

        text-align:
            left;

    }


    .course-500-phase-card--two
    .course-500-phase-identity {

        border-color:
            var(--five-gold-border);

    }


    .course-500-phase-identity__badge {

        width:
            58px;

        min-height:
            70px;

        margin:
            0;

    }


    .course-500-phase-identity__badge strong {

        font-size:
            27px;

    }


    .course-500-phase-identity h2 {

        font-size:
            18px;

    }


    .course-500-phase-identity p {

        max-width:
            none;

        margin-top:
            5px;

        font-size:
            9px;

    }


    .course-500-phase-identity__duration {

        margin:
            0;

        padding:
            0;

        text-align:
            center;

    }


    .course-500-phase-identity__duration strong {

        font-size:
            21px;

    }


    .course-500-phase-identity__duration span {

        font-size:
            7px;

    }


    .course-500-content-card {

        margin:
            10px;

        padding:
            0 10px 12px;

    }


    .course-500-content-card__heading {

        min-height:
            48px;

    }


    .course-500-phase-bar {

        flex-wrap:
            wrap;

        min-height:
            auto;

        padding:
            9px;

        font-size:
            7px;

        line-height:
            1.5;

        text-align:
            center;

    }


    .course-500-phase-bar i {

        display:
            none;

    }


    /* Break */

    .course-500-break {

        padding:
            20px 0 23px;

    }


    .course-500-break__heading {

        margin-bottom:
            18px;

    }


    .course-500-break__heading > span {

        font-size:
            18px;

    }


    .course-500-break-grid {

        grid-template-columns:
            1fr;

        gap:
            10px;

    }


    .course-500-break-item {

        min-height:
            115px;

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

    }


    /* Journey */

    .course-500-journey-summary {

        padding:
            23px 0 25px;

    }


    .course-500-journey-timeline {

        display:
            flex;

        align-items:
            stretch;

        gap:
            6px;

        overflow-x:
            auto;

        padding-bottom:
            5px;

    }


    .course-500-journey-node {

        flex:
            0 0 125px;

        min-height:
            72px;

    }


    .course-500-journey-timeline > i {

        flex:
            0 0 auto;

        align-self:
            center;

    }


    .course-500-journey-stats {

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

        width:
            100%;

        max-width:
            none;

        margin-top:
            9px;

    }


    .course-500-journey-stats > div:nth-child(2) {

        border-right:
            0;

    }


    .course-500-journey-stats > div:nth-child(-n+2) {

        border-bottom:
            1px solid #e7eae7;

    }

}


/* =========================================================
   27. SMALL MOBILE
   ========================================================= */

@media (
    max-width: 480px
) {

    .course-500-transform__step {

        width:
            88px;

        min-height:
            59px;

    }


    .course-500-transform__step strong {

        font-size:
            13px;

    }


    .course-500-transform__step small {

        font-size:
            7px;

    }


    .course-500-transform__phase {

        font-size:
            7px;

    }


    .course-500-transform__arrow {

        font-size:
            18px;

    }


    .course-500-phase-identity {

        grid-template-columns:
            62px minmax(0,1fr) 60px;

    }


    .course-500-phase-identity__badge {

        width:
            52px;

        min-height:
            65px;

    }


    .course-500-phase-identity__badge span {

        font-size:
            7px;

    }


    .course-500-phase-identity__badge strong {

        font-size:
            24px;

    }


    .course-500-phase-identity h2 {

        font-size:
            16px;

    }


    .course-500-phase-identity p {

        font-size:
            8px;

    }


    .course-500-phase-identity__duration strong {

        font-size:
            18px;

    }


    .course-500-content-card {

        margin:
            8px;

        padding:
            0 8px 10px;

    }


    .course-500-content-card__heading span {

        font-size:
            9px;

    }


    .course-500-content-card__heading small {

        font-size:
            8px;

    }


    .course-500-curriculum-row summary {

        grid-template-columns:
            24px minmax(0,1fr) 16px;

        gap:
            5px;

        min-height:
            31px;

        padding:
            0 5px;

    }


    .course-500-curriculum-row summary strong {

        font-size:
            8px;

    }


    .course-500-row-number {

        width:
            16px;

        height:
            16px;

        font-size:
            6px;

    }


    .course-500-schedule-row {

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

        min-height:
            29px;

    }


    .course-500-schedule-row strong,
    .course-500-schedule-row span {

        font-size:
            8px;

    }


    .course-500-break-item {

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

    }


    .course-500-break-item h3 {

        font-size:
            10px;

    }


    .course-500-break-item p {

        font-size:
            7px;

    }


    .course-500-break-item__link {

        font-size:
            7px;

    }


    .course-500-journey-summary__heading h2 {

        font-size:
            16px;

    }

}


/* =========================================================
   28. REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .course-500-transform__step,
    .course-500-break-item,
    .course-500-break-item__image img {

        transition:
            none;

    }

}