/*
 * Desktop-only Masterclass background.
 * Hidden on mobile.
 */

.masterclass-bg,
.masterclass-shade {
    display: none;
}
/*
 * =========================================================
 * D2C GAME
 * 08 MASTERCLASS
 *
 * DESKTOP ONLY
 * Width comes from desktop-layout.css.
 * =========================================================
 */

@media (min-width: 1024px) {


    /* =====================================================
       SECTION
       ===================================================== */

    .masterclass-section {

        position: relative;

        padding:
            90px 0;

        overflow: hidden;

        background: #ffffff;
    }


    /*
     * Do NOT set .home-shell width here.
     * desktop-layout.css controls it.
     */


    /* =====================================================
       MAIN PANEL
       ===================================================== */

    .masterclass-panel {

        position: relative;

        width: 100%;

        min-height: 660px;

        overflow: hidden;

        background: #081019;

        color: #ffffff;
    }



    /* =====================================================
       UPLOADED BACKGROUND
       ===================================================== */

    .masterclass-bg {

        position: absolute;

        z-index: 0;

        inset: 0;

        display: block;

        overflow: hidden;
    }


    .masterclass-bg img {

        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        /*
         * Person/image is on right.
         */

        object-position:
            center center;
    }



    /* =====================================================
       OVERLAY
       ===================================================== */

    .masterclass-shade {

        position: absolute;

        z-index: 1;

        inset: 0;

        display: block;

        background:

            linear-gradient(
                90deg,

                rgba(4,10,16,.98) 0%,
                rgba(4,10,16,.96) 20%,
                rgba(4,10,16,.90) 37%,
                rgba(4,10,16,.68) 48%,
                rgba(4,10,16,.26) 62%,
                rgba(4,10,16,.02) 78%
            ),

            linear-gradient(
                180deg,
                rgba(5,10,16,.06) 0%,
                rgba(5,10,16,.03) 65%,
                rgba(5,10,16,.20) 100%
            );

        pointer-events: none;
    }



    /* =====================================================
       COPY
       ===================================================== */

    .masterclass-copy {

        position: relative;

        z-index: 3;

        width: 53%;
        max-width: 690px;

        padding:
            67px 0
            45px
            72px;
    }



    /* =====================================================
       EYEBROW
       ===================================================== */

    .masterclass-copy
    .home-kicker {

        margin:
            0 0
            20px;

        color: #e1e4e9;

        font-size: 11px;
        line-height: 1;

        font-weight: 700;

        letter-spacing: .35em;

        text-transform: uppercase;
    }



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

    .masterclass-copy h2 {

        margin: 0;

        color: #ffffff;

        font-size: 60px;
        line-height: .92;

        font-weight: 900;

        letter-spacing: -.055em;
    }


    .masterclass-copy h2 span {

        color: #ffc445;
    }



    /* =====================================================
       INTRO
       ===================================================== */

    .masterclass-intro {

        max-width: 560px;

        margin:
            22px 0
            24px;

        color: #e0e4e9;

        font-size: 18px;
        line-height: 1.38;

        font-weight: 400;

        letter-spacing: -.012em;
    }



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

    .masterclass-features {

        display: grid;

        gap: 17px;

        margin:
            0 0
            27px;
    }


    .masterclass-features article {

        display: grid;

        grid-template-columns:
            48px 1fr;

        gap: 16px;

        align-items: center;
    }



    /* icon box */

    .masterclass-feature-icon {

        display: grid;

        place-items: center;

        width: 46px;
        height: 46px;

        border:
            1px solid
            rgba(255,255,255,.55);

        border-radius: 8px;

        color: #ffffff;
    }


    .masterclass-feature-icon svg {

        width: 25px;
        height: 25px;
    }



    /* feature title */

    .masterclass-features strong {

        display: block;

        margin: 0;

        color: #ffffff;

        font-size: 15px;
        line-height: 1.15;

        font-weight: 800;
    }


    /* feature text */

    .masterclass-features p {

        margin:
            4px 0
            0;

        color: #cdd2da;

        font-size: 13px;
        line-height: 1.25;
    }



    /* =====================================================
       CTA
       ===================================================== */

    .masterclass-button {

        display: flex;

        align-items: center;
        justify-content: center;

        gap: 22px;

        width: 410px;

        height: 58px;
        min-height: 58px;

        margin: 0;

        padding:
            0 25px;

        border: 0;

        border-radius: 7px;

        background:

            linear-gradient(
                90deg,
                #ffc43a 0%,
                #ffcf58 100%
            );

        color: #090c10;

        text-decoration: none;

        font-size: 17px;
        line-height: 1;

        font-weight: 900;

        letter-spacing: -.02em;

        box-shadow:
            0 8px 24px
            rgba(255,190,40,.13);
    }


    .masterclass-button svg {

        width: 20px;
        height: 20px;
    }



    /* =====================================================
       META
       ===================================================== */

    .masterclass-meta {

        display: flex;

        align-items: center;

        gap: 0;

        margin:
            18px 0
            0;

        color: #d9dde3;

        font-size: 12px;
        line-height: 1;
    }


    .masterclass-meta > span {

        display: flex;

        align-items: center;

        gap: 8px;

        padding:
            0 17px;

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

        white-space: nowrap;
    }


    .masterclass-meta > span:first-child {

        padding-left: 0;

        border-left: 0;
    }


    .masterclass-meta b {

        display: inline-flex;

        align-items: center;
        justify-content: center;

        color: #ffffff;

        font-size: 17px;

        font-weight: 400;
    }

}
@media
(
    min-width: 1024px
)
and
(
    max-width: 1500px
) {

    .masterclass-section {

        padding:
            72px 0;
    }


    .masterclass-panel {

        min-height: 600px;
    }


    .masterclass-copy {

        width: 55%;

        padding:
            58px 0
            40px
            58px;
    }


    .masterclass-copy h2 {

        font-size: 52px;
    }


    .masterclass-intro {

        font-size: 16px;

        max-width: 500px;
    }


    .masterclass-button {

        width: 380px;

        height: 55px;
        min-height: 55px;
    }

}