/*
 * =========================================================
 * D2C GAME
 * 09 INSIGHTS — MOBILE
 *
 * ONLY < 1024px
 * Desktop remains untouched.
 * =========================================================
 */

@media (max-width: 1023px) {


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

    .insights-section {
        position: relative;

        padding:
            42px 18px
            34px;

        overflow: hidden;

        background: #ffffff;

        color: #080a0e;
    }


    .insights-section .home-shell {
        width: 100%;
        max-width: 540px;

        margin:
            0 auto;

        padding: 0;
    }



    /* =====================================================
       HEADING
       ===================================================== */

    .insights-heading {
        width: 100%;

        max-width: 480px;

        margin:
            0 auto
            17px;

        text-align: center;
    }


    .insights-heading .home-kicker {
        margin:
            0 0
            10px;

        color: #6528ff;

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

        font-weight: 800;

        letter-spacing: .20em;

        text-transform: uppercase;
    }


    .insights-heading h2 {
        margin: 0;

        color: #07090d;

        font-size: 31px;
        line-height: .97;

        font-weight: 900;

        letter-spacing: -.045em;
    }


    /*
     * Gold text starts on its own line
     * exactly like mobile reference.
     */

    .insights-heading h2 span {
        display: block;

        color: #ffbd25;
    }


    .insights-heading h2 span::after {
        display: none;
    }


    .insights-heading > p:last-child {
        max-width: 350px;

        margin:
            9px auto
            0;

        color: #536078;

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

        font-weight: 400;
    }



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

    .insights-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 11px;

        width: 100%;

        margin:
            16px 0
            14px;
    }



    /* =====================================================
       ARTICLE CARD
       IMAGE LEFT / CONTENT RIGHT
       ===================================================== */

    .insight-card {
        display: grid;

        grid-template-columns:
            47% 53%;

        min-width: 0;

        min-height: 140px;

        overflow: hidden;

        border:
            1px solid
            #dfe3e9;

        border-radius: 8px;

        background: #ffffff;

        box-shadow:
            0 3px 10px
            rgba(18, 27, 44, .04);
    }



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

    .insight-card__image {
        position: relative;

        display: block;

        width: 100%;
        height: 100%;
        min-height: 140px;

        overflow: hidden;

        background: #080b12;
    }


    .insight-card__image picture {
        display: block;

        width: 100%;
        height: 100%;
    }


    .insight-card__image picture img,
    .insight-card__image > img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center;
    }



    /* =====================================================
       CATEGORY
       ===================================================== */

    .insight-card__category {
        position: absolute;

        z-index: 2;

        top: 8px;
        left: 8px;

        display: inline-flex;

        align-items: center;

        min-height: 19px;

        padding:
            0 7px;

        border-radius: 4px;

        background: #6427ed;

        color: #ffffff;

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

        font-weight: 800;

        text-transform: uppercase;
    }



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

    .insight-card__body {
        display: flex;

        flex-direction: column;

        min-width: 0;

        min-height: 140px;

        padding:
            10px 11px
            9px;
    }



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

    .insight-card__meta {
        display: flex;

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

        gap: 6px;

        margin:
            0 0
            7px;

        color: #687389;

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


    .insight-card__meta span {
        display: flex;

        align-items: center;

        gap: 4px;

        white-space: nowrap;
    }


    .insight-card__meta svg {
        width: 10px;
        height: 10px;

        color: #6728ff;
    }


    .insight-card__meta
    span:last-child::before {
        content: "•";

        margin-right: 1px;
    }



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

    .insight-card h3 {
        margin:
            0 0
            6px;

        color: #080a0e;

        font-size: 13px;
        line-height: 1.12;

        font-weight: 900;

        letter-spacing: -.025em;
    }


    .insight-card h3 a {
        color: inherit;

        text-decoration: none;
    }



    /* =====================================================
       DESCRIPTION
       ===================================================== */

    .insight-card__body > p {
        display:
            -webkit-box;

        overflow: hidden;

        margin:
            0 0
            6px;

        color: #566278;

        font-size: 8px;
        line-height: 1.27;

        font-weight: 400;

        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }



    /* =====================================================
       READ ARTICLE
       ===================================================== */

    .insight-card__link {
        display: inline-flex;

        align-items: center;

        gap: 5px;

        width: max-content;

        margin-top: auto;

        color: #6528ff;

        text-decoration: none;

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

        font-weight: 800;
    }


    .insight-card__link span {
        font-size: 12px;
    }



    /* =====================================================
       NEWSLETTER
       ===================================================== */

    .insights-newsletter {
        display: block;

        width: 100%;

        margin:
            10px 0
            0;

        padding:
            13px 14px
            12px;

        border:
            1px solid
            #d9ccff;

        border-radius: 9px;

        background:
            linear-gradient(
                120deg,
                #faf8ff 0%,
                #f2ecff 100%
            );
    }



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

    .insights-newsletter__intro {
        display: grid;

        grid-template-columns:
            58px 1fr;

        gap: 10px;

        align-items: center;
    }


    .insights-newsletter__icon {
        display: grid;

        place-items: center;

        width: 54px;
        height: 54px;

        border:
            1px solid
            #ffffff;

        border-radius: 50%;

        background: #eee5ff;

        color: #6828ff;
    }


    .insights-newsletter__icon svg {
        width: 30px;
        height: 30px;
    }


    .insights-newsletter__intro small {
        display: block;

        margin:
            0 0
            3px;

        color: #6528ff;

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

        font-weight: 800;

        letter-spacing: .10em;

        text-transform: uppercase;
    }


    .insights-newsletter__intro h3 {
        margin:
            0 0
            3px;

        color: #080a0e;

        font-size: 14px;
        line-height: 1.08;

        font-weight: 900;

        letter-spacing: -.025em;
    }


    .insights-newsletter__intro p {
        margin: 0;

        color: #5b667a;

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



    /* =====================================================
       NEWSLETTER FORM
       ===================================================== */

    .insights-newsletter__form-area {
        width: 100%;

        margin-top: 10px;

        padding: 0;
    }


    .insights-newsletter__form {
        display: grid;

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

        width: 100%;

        height: 34px;
    }


    .insights-newsletter__form input {
        min-width: 0;

        width: 100%;
        height: 34px;

        padding:
            0 10px;

        border:
            1px solid
            #dadde5;

        border-right: 0;

        border-radius:
            5px 0 0 5px;

        background: #ffffff;

        color: #11141a;

        font-size: 8px;

        outline: none;
    }


    .insights-newsletter__form
    input::placeholder {
        color: #8a94a6;
    }


    .insights-newsletter__form button {
        height: 34px;

        padding:
            0 8px;

        border: 0;

        border-radius:
            0 5px 5px 0;

        background:
            linear-gradient(
                90deg,
                #6225eb,
                #6828ff
            );

        color: #ffffff;

        font-size: 8px;

        font-weight: 800;
    }



    /* =====================================================
       NEWSLETTER BENEFITS
       ===================================================== */

    .insights-newsletter__benefits {
        display: flex;

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

        gap: 5px;

        margin:
            8px 0
            0;

        color: #566175;

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


    .insights-newsletter__benefits span {
        display: flex;

        align-items: center;

        gap: 4px;

        white-space: nowrap;
    }


    .insights-newsletter__benefits b {
        display: grid;

        place-items: center;

        width: 11px;
        height: 11px;

        border:
            1px solid
            #6728ff;

        border-radius: 50%;

        color: #6728ff;

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

}