.article {
    margin-bottom: 20px
}

@media (min-width: 1200px) {
    .article {
        margin-bottom: 40px
    }
}

.article__head {
    margin-bottom: 20px
}

@media (min-width: 1200px) {
    .article__head {
        margin-bottom: 40px
    }
}

.article__title {
    color: var(--black)
}

.article__highlight {
    margin-bottom: 20px
}

.article__highlight-card {
    padding: 0 0 39.555%
}

@media (min-width: 1200px) {
    .article__highlight {
        margin-bottom: 40px
    }

    .article__highlight-card {
        border-radius: 28px;
        padding: 39px;
        min-height: 500px
    }
}

.article__content {
    border-radius: 20px;
    border: 1px solid var(--primary-10);
    background-color: var(--gray-100);
    padding: 30px 24px
}

.article__date {
    color: var(--black);
    font-size: var(--text-size-12);
    font-weight: var(--fw-normal);
    line-height: 1.33;
    margin-bottom: 12px
}

.article__text {
    color: var(--black);
    font-size: var(--text-size);
    font-weight: var(--fw-normal);
    line-height: var(--lh-md)
}

.article__text p:not(:first-of-type) {
    margin-top: 24px
}

@media (min-width: 1200px) {
    .article__date {
        font-size: var(--text-size);
        line-height: var(--lh-md);
        margin-bottom: 20px
    }

    .article__text {
        font-size: var(--text-size-20);
        line-height: var(--lh-sm)
    }

    .article__text p:not(:first-of-type) {
        margin-top: 26px
    }
}