@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-Variable/Rubik-Variable.woff2') format('woff2');
    font-weight: 100 1000;
    font-optical-sizing: auto;
    font-stretch: 0% 200%;
    font-style: normal;
    font-display: swap;
}

.multi-banner-3__container-wrapper {
    --font-family-rubik: 'Rubik', sans-serif;
    --multi-banner-3__container-max-width: 1350px;
    --multi-banner-3__max-width: 1232px;
    --multi-banner-3__font-color-white: #ffffff;
    --multi-banner-3__font-color-black: #000000;
    --multi-banner-3__font-color-transparent-black: #00000099;
    --multi-banner-3__font-color-blue-1: #00b0ff;
    --multi-banner-3__font-color-blue-2: #b5e2fd;
    --multi-banner-3__cell-box-shadow-color: #00b0ff;

    --multi-banner-3__scalling-factor: 1;
    --multi-banner-3__scalling-landscape-factor: 1;
    --multi-banner-3__scalling-portrait-factor: 1;

    --multi-banner-3__landscape-width: calc(429px * var(--multi-banner-3__scalling-landscape-factor));
    --multi-banner-3__portrait-width: calc(324px * var(--multi-banner-3__scalling-portrait-factor));

    --multi-banner-3__img-1-width: calc(429px * var(--multi-banner-3__scalling-factor));
    --multi-banner-3__img-1-height: calc(228px * var(--multi-banner-3__scalling-factor));
    --multi-banner-3__img-2-width: calc(429px * var(--multi-banner-3__scalling-factor));
    --multi-banner-3__img-2-height: calc(236px * var(--multi-banner-3__scalling-factor));
    --multi-banner-3__img-3-width: calc(324px * var(--multi-banner-3__scalling-factor));
    --multi-banner-3__img-3-height: calc(504px * var(--multi-banner-3__scalling-factor));
    --multi-banner-3__img-4-width: calc(429px * var(--multi-banner-3__scalling-factor));
    --multi-banner-3__img-4-height: calc(229px * var(--multi-banner-3__scalling-factor));
    --multi-banner-3__img-5-width: calc(429px * var(--multi-banner-3__scalling-factor));
    --multi-banner-3__img-5-height: calc(275px * var(--multi-banner-3__scalling-factor));

    font-family: var(--font-family-rubik);
    margin: 0 auto;
    max-width: var(--multi-banner-3__container-max-width);
    width: 100%;
    box-sizing: border-box;
    padding: 20px 10px;
    border-radius: 30px;
}

.multi-banner-3__container--background {
    background-image: url("../images/background-gradient.svg");
    background-position: center;
    background-size: 110% auto;
    box-sizing: border-box;
}

.multi-banner-3__container {
    display: grid;
    grid-template-columns: var(--multi-banner-3__landscape-width) var(--multi-banner-3__portrait-width) var(--multi-banner-3__landscape-width);
    grid-template-rows: auto auto;
    gap: 20px;
    max-width: var(--multi-banner-3__max-width);
    margin: 0 auto;
    box-sizing: border-box;
    justify-content: center;
}

/* Расположение колонок */
.multi-banner-3__col-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    display: grid;
    grid-template-rows: auto auto;
    gap: 20px;
}

.multi-banner-3__col-2 {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    display: grid;
    grid-template-rows: auto;
    justify-items: center;
    align-content: stretch;
}

.multi-banner-3__col-3 {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    display: grid;
    grid-template-rows: auto auto;
    gap: 20px;
}

.multi-banner-3__item {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: 0.2s all linear;
    position: relative;
    /* Для позиционирования надписей */
}

.multi-banner-3__item:hover {
    transform: scale(1.05);
}

.multi-banner-3__item img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

/* Стили для надписей */
.multi-banner-3__label {
    position: absolute;
    /* color: var(--multi-banner-3__font-color-white); */
    /* font-size: 16px; */
    /* font-weight: 500; */
    /* text-align: center; */
    /* padding: 5px 10px; */
    /* background: rgba(0, 0, 0, 0.5); */
    /* border-radius: 5px; */
}

.multi-banner-3__label--top {
    top: 10px;
    /* Базовый отступ сверху */
}

.multi-banner-3__label--bottom {
    bottom: 10px;
    /* Базовый отступ снизу */
}

.multi-banner-3__text-caption {
    box-sizing: border-box;
    font-family: var(--font-family-rubik);
    color: var(--multi-banner-3__font-color-black);
    font-weight: 600;
    font-size: 24px;
    line-height: normal;
    padding: 14px;
}

.multi-banner-3__text-description {
    box-sizing: border-box;
    font-family: var(--font-family-rubik);
    color: var(--multi-banner-3__font-color-black);
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    padding: 14px;
}


.multi-banner-3__text-color-blue {
    color: var(--multi-banner-3__font-color-blue-2);
}

.multi-banner-3__text-color-blue {
    color: var(--multi-banner-3__font-color-blue-1);
}

.multi-banner-3__text-color-white {
    color: var(--multi-banner-3__font-color-white);
}

/* Индивидуальные отступы для каждого баннера */
.multi-banner-3__landscape-item-1 .multi-banner-3__label--top {
    /* Баннер 1 */
    top: 15px;
    left: 10px;
}

.multi-banner-3__landscape-item-1 .multi-banner-3__label--bottom {
    bottom: 70px;
    left: 10px;
}

.multi-banner-3__landscape-item-2 .multi-banner-3__label--top {
    /* Баннер 2 */
    top: 27px;
    left: 8px;
}

.multi-banner-3__landscape-item-2 .multi-banner-3__label--bottom {
    /* Баннер 2 */
    bottom: 80px;
    left: 7px;
}

.multi-banner-3__landscape-item-2 .multi-banner-3__label--bottom-2 {
    /* Баннер 2 */
    bottom: 48px;
    left: 0px;
}

.multi-banner-3__portrait-item-1 .multi-banner-3__label--top {
    /* Баннер 3 */
    top: 25px;
    left: 10px;
}

.multi-banner-3__portrait-item-1 .multi-banner-3__label--bottom {
    /* Баннер 3 */
    bottom: 44px;
    left: 22px;
}

.multi-banner-3__landscape-item-3 .multi-banner-3__label--top {
    /* Баннер 4 */
    top: 30px;
    left: 9px;
}

.multi-banner-3__landscape-item-3 .multi-banner-3__label--bottom {
    /* Баннер 4 */
    bottom: 21px;
    left: 4px;
}

.multi-banner-3__landscape-item-4 .multi-banner-3__label--top {
    /* Баннер 5 */
    top: 26px;
    left: 13px;
}

.multi-banner-3__landscape-item-4 .multi-banner-3__label--bottom {
    /* Баннер 5 */
    bottom: 107px;
    left: 19px;
}

/* Точные размеры баннеров */
.multi-banner-3__landscape-item-1 img {
    max-width: var(--multi-banner-3__img-1-width);
}

.multi-banner-3__landscape-item-2 img {
    max-width: var(--multi-banner-3__img-2-width);
}

.multi-banner-3__portrait-item-1 img {
    max-width: var(--multi-banner-3__img-3-width);
}

.multi-banner-3__landscape-item-3 img {
    max-width: var(--multi-banner-3__img-4-width);
}

.multi-banner-3__landscape-item-4 img {
    max-width: var(--multi-banner-3__img-5-width);
}

/* Адаптивность */

/* Экран до 1232px — баннеры по 2 в ряд */
@media (max-width: 1232px) {
    .multi-banner-3__container {
        grid-template-columns: minmax(0, var(--multi-banner-3__landscape-width)) minmax(0, var(--multi-banner-3__landscape-width));
        grid-template-rows: auto auto auto;
        max-width: calc(var(--multi-banner-3__landscape-width) * 2 + 20px);
        gap: 20px;
    }

    .multi-banner-3__col-1 {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        grid-template-rows: auto auto;
        gap: 20px;
    }

    .multi-banner-3__col-2 {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }

    .multi-banner-3__col-3 {
        grid-column: 1 / 3;
        grid-row: 3 / 4;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, var(--multi-banner-3__landscape-width)));
        grid-template-rows: auto;
        gap: 20px;
        justify-content: center;
    }

    .multi-banner-3__landscape-item-1 img {
        width: 100%;
        height: auto;
        max-width: var(--multi-banner-3__img-1-width);
        object-fit: contain;
    }

    .multi-banner-3__landscape-item-2 img {
        width: 100%;
        height: auto;
        max-width: var(--multi-banner-3__img-2-width);
        object-fit: contain;
    }

    .multi-banner-3__landscape-item-3 img {
        width: 100%;
        height: auto;
        max-width: var(--multi-banner-3__img-4-width);
        object-fit: contain;
    }

    .multi-banner-3__landscape-item-4 img {
        width: 100%;
        height: auto;
        max-width: var(--multi-banner-3__img-5-width);
        object-fit: contain;
    }
}

@media (max-width: 933px) {
    .multi-banner-3__container-wrapper {
        --multi-banner-3__scalling-landscape-factor: 1;
        --multi-banner-3__scalling-portrait-factor: 1;
    }
}

@media (max-width: 878px) {
    .multi-banner-3__container-wrapper {
        --multi-banner-3__scalling-landscape-factor: 1;
        --multi-banner-3__scalling-portrait-factor: 1;
    }
}

@media (max-width: 830px) {
    .multi-banner-3__container-wrapper {
        --multi-banner-3__scalling-landscape-factor: 1;
        --multi-banner-3__scalling-portrait-factor: 1;
    }
}

/* Экран до 800px — баннеры в одну колонку */
@media (max-width: 800px) {
    .multi-banner-3__container-wrapper {
        --multi-banner-3__scalling-factor: 1;
        --multi-banner-3__scalling-landscape-factor: 1;
        --multi-banner-3__scalling-portrait-factor: 1;
    }

    .multi-banner-3__container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, auto);
        max-width: var(--multi-banner-3__landscape-width);
        gap: 20px;
    }

    .multi-banner-3__col-1 {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        gap: 20px;
    }

    .multi-banner-3__col-2 {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }

    .multi-banner-3__col-3 {
        grid-column: 1 / 2;
        grid-row: 4 / 6;
        grid-template-columns: none;
        grid-template-rows: auto auto;
        gap: 20px;
    }
}

/* Экран до 480px — уменьшение боковых отступов */
@media (max-width: 480px) {
    .multi-banner-3__container-wrapper {
        padding: 10px 15px;
        --multi-banner-3__scalling-landscape-factor: 0.95;
        --multi-banner-3__scalling-portrait-factor: 1;
    }
}

@media (max-width: 452px) {
    .multi-banner-3__container-wrapper {
        --multi-banner-3__scalling-landscape-factor: 0.9;
        --multi-banner-3__scalling-portrait-factor: 1;
    }
}

/* Экран до 300px — дополнительная реперная точка */
@media (max-width: 300px) {
    .multi-banner-3__container-wrapper {
        --multi-banner-3__scalling-landscape-factor: 0.85;
        --multi-banner-3__scalling-portrait-factor: 0.9;
    }
}