/* =========================
   THEME
========================= */

.section-page.coding,
.section-info.q {
    --section-main: #202b68;
    --section-light: #168cc8;
    --section-soft: #eef6fc;
    --section-bg: #f7fbff;
    --section-text: #172b42;
    --section-sub: #66717f;
    --section-divider: #e2e7ec;

    --section-step1: #b8ddef;
    --section-step2: #83c3e0;
    --section-step3: #49a2cf;
    --section-step4: #168cc8;
}

.section-page.meta,
.section-info.meta {
    --section-main: #4b286d;
    --section-light: #70449a;
    --section-soft: #f5f0f8;
    --section-bg: #faf8fc;
    --section-text: #2f2438;
    --section-sub: #746a7c;
    --section-divider: #e8e0ed;
    --section-step1: #cdb8dc;
    --section-step2: #aa8bc2;
    --section-step3: #7d58a0;
    --section-step4: #4b286d;
}

/* =========================
   TOP SECTION INFO
========================= */

.section-info {
    width: 100%;
    padding: 80px 0 48px;
    background: #fff;
}

.section-container {
    width: min(1120px, calc(100% - 80px));
    margin: 0 auto;
}

.section-head {
    max-width: 720px;
    margin-bottom: 48px;
}

.section-label {
    display: block;
    margin-bottom: 10px;
    color: var(--section-light);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .15em;
}

.section-head h1 {
    margin: 0;
    color: var(--section-text);
    font-size: 42px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: -1.5px;
    word-break: keep-all;
}

.section-head p {
    margin: 14px 0 0;
    color: var(--section-sub);
    font-size: 17px;
    line-height: 1.8;
    word-break: keep-all;
}

.section-divider {
    width: 100%;
    border-top: 1px solid var(--section-divider);
}

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

.section-page {
    width: min(1120px, calc(100% - 80px));
    margin: 0 auto;
    padding: 0 0 90px;
    background: #fff;
}

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

@media(max-width:900px) {

    .section-container,
    .section-page {
        width: calc(100% - 64px);
    }

    .section-page {
        padding: 42px 0 80px;
    }
}

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

@media(max-width:640px) {
    .section-info {
        padding: 48px 0 34px;
    }

    .section-container,
    .section-page {
        width: calc(100% - 32px);
    }

    .section-page {
        padding: 36px 0 70px;
    }

    .section-head {
        margin-bottom: 34px;
    }

    .section-label {
        font-size: 11px;
    }

    .section-head h1 {
        font-size: 30px;
        letter-spacing: -1px;
    }

    .section-head p {
        font-size: 14px;
    }

    .section-head p br {
        display: none;
    }
}

@media(max-width:380px) {

    .section-container,
    .section-page {
        width: calc(100% - 28px);
    }
}