/* ============================================================
   COMING SOON
   ============================================================ */

.coming-soon {

    min-height:
        60vh;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        30px 15px;
}


/* ============================================================
   VISUAL
   ============================================================ */

.coming-icon {

    width:
        110px;

    height:
        110px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        25px;

    border-radius:
        30px;

    background:
        var(--primary-soft);

    color:
        var(--primary);

    font-size:
        48px;

    font-weight:
        300;

    box-shadow:
        var(--card-shadow);
}


/* Individual visual treatment */

.course-icon {
    border-radius:
        50% 50% 30px 30px;
}

.certificate-icon {
    border-radius:
        18px;

    font-size:
        52px;
}

.mentorship-icon {
    border-radius:
        50%;
}

.partnership-icon {
    transform:
        rotate(45deg);

    border-radius:
        20px;
}

.partnership-icon::first-letter {
    transform:
        rotate(-45deg);
}


/* ============================================================
   MESSAGE
   ============================================================ */

.coming-soon h2 {

    margin:
        0 0 6px;

    color:
        var(--text);

    font-size:
        22px;

    letter-spacing:
        -0.5px;
}


.coming-soon p {

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        12px;
}


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

@media (max-width: 380px) {

    .coming-icon {

        width:
            90px;

        height:
            90px;

        margin-bottom:
            20px;

        font-size:
            40px;
    }

    .coming-soon h2 {
        font-size:
            20px;
    }
}