/*
 * "О программе" (sections/course-about.php): prose column plus a facts tile.
 * Facts are the dl/dt/dd pair from 30-course-hero.css, restyled for a light
 * surface - the pair is a tile, never a table row.
 */

.course-about {
    padding: 3vw 0;
}

.course-about__grid {
    --bs-gutter-x: 2.5vw;
    --bs-gutter-y: 2.08vw;
}

.course-about__paragraph {
    margin: 0 0 1.04vw;
    max-width: 44em;
    color: var(--color-text-muted);
}

.course-about__paragraph:last-child {
    margin-bottom: 0;
}

.course-about__facts {
    --bs-gutter-x: 0.83vw;
    --bs-gutter-y: 0.83vw;
    margin: 0;
}

.course-about__fact {
    padding: 1.25vw 1.04vw;
    background: var(--color-surface-muted);
    border-radius: var(--radius);
}

.icon.course-about__fact-icon {
    width: 1.67vw;
    height: 1.67vw;
    margin-bottom: 0.63vw;
    color: var(--color-cta);
}

.course-about__fact-label {
    margin: 0 0 0.21vw;
    font-size: 0.73vw;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.course-about__fact-value {
    margin: 0;
    font-weight: 700;
    color: var(--color-primary);
}

@media only screen and (max-width: 767.98px) {
    .course-about {
        padding: 6vw 0;
    }

    .course-about__grid {
        --bs-gutter-x: 4.27vw;
        --bs-gutter-y: 6.4vw;
    }

    .course-about__title {
        margin: 0 0 4vw;
    }

    .course-about__paragraph {
        max-width: none;
        margin: 0 0 4vw;
    }

    .course-about__facts {
        --bs-gutter-x: 3.2vw;
        --bs-gutter-y: 3.2vw;
    }

    .course-about__fact {
        padding: 4.27vw 4vw;
    }

    .icon.course-about__fact-icon {
        width: 6.4vw;
        height: 6.4vw;
        margin-bottom: 2.13vw;
    }

    .course-about__fact-label {
        font-size: 3.2vw;
    }
}