/* Настройки: размеры в пикселях при колонке 816 px (числа без px).
   В двухколоночной разметке размеры масштабируются вместе с шириной.
   Базовая ширина: 816 + 24 (зазор) + 816 = 1656 px. */
.hero {
    --hero-title-size: 50;
    --hero-title-line-height: 1.05;
    --hero-text-size: 22;
    --hero-text-line-height: 1.55;
    --hero-button-size: 20;
    --hero-card-title-size: 22;
    --hero-card-label-size: 16;
    --hero-card-text-size: 18;
    --hero-card-image-width: 144;
    --hero-card-image-height: 108;
    --hero-card-min-height: 180;
    --hero-card-padding: 24;
    --hero-card-gap: 20;
    --hero-mobile-title-size: 32;
    --hero-mobile-text-size: 16;
    --hero-mobile-button-size: 16;
    /* Доли ширины колонок после вычета зазора. */
    --hero-left-column: 54fr;
    --hero-right-column: 46fr;
    --hero-column-gap: 24;
    --hero-content-right: 24;
    --hero-content-top: 60;
    --hero-content-bottom: 40;
    --hero-text-gap: 20;
    --hero-cards-gap: 16;
    --hero-cards-top: 28;
    background: #fbfbfb;
}

.hero > .container {
    container-type: inline-size;
}

@media (min-width: 768px) {
	.hero {
		margin-left: calc((768px - 100vw) / 2);
		margin-right: calc((768px - 100vw) / 2);
	}
}

@media (min-width: 992px) {
	.hero {
		margin-left: calc((992px - 100vw) / 2);
		margin-right: calc((992px - 100vw) / 2);
	}
}

@media (min-width: 1200px) {
	.hero {
		margin-left: calc((1200px - 100vw) / 2);
		margin-right: calc((1200px - 100vw) / 2);
	}
}

@media (min-width: 1400px) {
	.hero {
		margin-left: calc((1320px - 100vw) / 2);
		margin-right: calc((1320px - 100vw) / 2);
	}
}

@media (min-width: 1680px) {
	.hero {
		margin-left: calc((1680px - 100vw) / 2);
		margin-right: calc((1680px - 100vw) / 2);
	}
}

.hero__container {
    --hero-unit: calc(90cqw / 1656);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, var(--hero-left-column)) minmax(0, var(--hero-right-column));
    gap: calc(var(--hero-column-gap) * var(--hero-unit));
    align-items: stretch;
}

.hero__content {
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--hero-content-top) * var(--hero-unit))
        calc(var(--hero-content-right) * var(--hero-unit))
        calc(var(--hero-content-bottom) * var(--hero-unit)) 0;
}

.hero__title {
    font-size: calc(var(--hero-title-size) * var(--hero-unit));
    line-height: var(--hero-title-line-height);
    font-weight: 400;
    color: #222;
    margin: 0 0 calc(var(--hero-text-gap) * var(--hero-unit));
}

.hero__content > .hr,
.hero__divider {
    flex-shrink: 0;
    width: 100%;
    height: 0;
    border: 0;
    border-top: 1px solid #b9b9b9;
    margin: calc(12 * var(--hero-unit)) 0 calc(var(--hero-text-gap) * var(--hero-unit));
}

.hero__description {
    color: #6c757d;
    font-size: calc(var(--hero-text-size) * var(--hero-unit));
    line-height: var(--hero-text-line-height);
    margin-bottom: calc(var(--hero-text-gap) * var(--hero-unit));
}

.hero__description p {
    font-size: inherit;
    line-height: inherit;
    margin: 0;
}

.hero__content > a {
    align-self: flex-start;
    line-height: 1;
}

.hero .hero__button {
    display: inline-block;
    min-height: 0;
    padding: calc(14 * var(--hero-unit)) calc(18 * var(--hero-unit));
    border: 1px solid #b9b9b9;
    border-radius: calc(30 * var(--hero-unit));
    text-decoration: none;
    color: #222;
    font-size: calc(var(--hero-button-size) * var(--hero-unit));
    line-height: 1;
    transition: .2s ease;
}

.hero__button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

/* Карточки участвуют в потоке: не накладываются на текст. */
.hero__articles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--hero-cards-gap) * var(--hero-unit));
    margin-top: auto;
    padding-top: calc(var(--hero-cards-top) * var(--hero-unit));
}

.hero__article {
    display: grid;
    grid-template-columns: calc(var(--hero-card-image-width) * var(--hero-unit)) minmax(0, 1fr);
    align-items: center;
    box-sizing: border-box;
    min-height: calc(var(--hero-card-min-height) * var(--hero-unit));
    gap: calc(var(--hero-card-gap) * var(--hero-unit));
    padding: calc(var(--hero-card-padding) * var(--hero-unit));
    border-radius: calc(12 * var(--hero-unit));
    background: #f4f3ef;
    text-decoration: none;
    color: inherit;
}

.hero__article-image {
    width: calc(var(--hero-card-image-width) * var(--hero-unit));
    height: calc(var(--hero-card-image-height) * var(--hero-unit));
    overflow: hidden;
}

.hero__article-content {
    min-width: 0;
    overflow-wrap: anywhere;
}

.hero__article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero__article-type {
    display: inline-block;
    font-size: calc(var(--hero-card-label-size) * var(--hero-unit));
    line-height: 1.3;
    color: #539e53;
    margin-bottom: calc(6 * var(--hero-unit));
}

.hero__article-title {
    font-size: calc(var(--hero-card-title-size) * var(--hero-unit));
    line-height: 1.3;
    color: #222;
    margin: 0;
}

.hero__article-desc {
    font-size: calc(var(--hero-card-text-size) * var(--hero-unit));
    line-height: 1.3;
    margin: calc(6 * var(--hero-unit)) 0 0;
}

.hero__media {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    aspect-ratio: 816 / 831;
    align-self: start;
    overflow: hidden;
}

/* В одну колонку текст сохраняет читаемый размер. */
@media (max-width: 1024px) {
    .hero__container {
        --hero-unit: 1px;
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .hero__content {
        --hero-title-size: var(--hero-mobile-title-size);
        --hero-text-size: var(--hero-mobile-text-size);
        --hero-button-size: var(--hero-mobile-button-size);
        padding: 20px 0;
    }
    .hero__articles { display: none; }
}