@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;
}

.multibanner-autocredit__container-wrapper {
    --font-family-rubik: 'Rubik', sans-serif;
    --multibanner-autocredit__container-max-width: 1281px;
    --multibanner-autocredit__max-width: 100%;
    --multibanner-autocredit__font-color-white: #ffffff;
    --multibanner-autocredit__font-color-black: #000000;
    --multibanner-autocredit__font-color-transparent-black: #00000099;
    --multibanner-autocredit__font-color-blue-1: #00b0ff;
    --multibanner-autocredit__font-color-blue-2: #b5e2fd;
    --multibanner-autocredit__cell-box-shadow-color: #00b0ff;
    font-family: var(--font-family-rubik);
    margin: 0 auto;
    max-width: var(--multibanner-autocredit__container-max-width);
    width: 100%;
    box-sizing: border-box;
    border-radius: 20px;
    padding: 23px 8px 5px 12px;
    margin-bottom: 60px;
}

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


.multibanner-autocredit__container {
    display: grid;
    grid-template-columns: 580px 580px;
    grid-template-areas: "multibanner-autocredit__col-1 multibanner-autocredit__col-2";
    gap: 40px;

    max-width: var(--multibanner-autocredit__max-width);
    margin: 0 auto;
    box-sizing: border-box;
    justify-content: center;
    padding-bottom: 20px;
}

.multibanner-autocredit__col-1 {
    --multibanner-autocredit__col-1--max-width: 100%;
    grid-area: multibanner-autocredit__col-1;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: var(--multibanner-autocredit__col-1--max-width);
    height: auto;
    gap: 40px;
}

.multibanner-autocredit__col-1 img {
    width: 100%;
}

.multibanner-autocredit__col-2 {
    --multibanner-autocredit__col-2--max-width: 100%;
    grid-area: multibanner-autocredit__col-2;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: var(--multibanner-autocredit__col-2--max-width);
    height: auto;
    gap: 40px;
}

.multibanner-autocredit__col-2 img {
    width: 100%;
}

.multibanner-autocredit__item {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: 0.2s all linear;
    position: relative;
    gap: 20px;
}

.multibanner-autocredit__item:hover {
    transform: scale(1.05);
}

/* медиа запросы начало */

@media (max-width: 1220px) {
    .multibanner-autocredit__container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

@media (max-width: 800px) {
    .multibanner-autocredit__container {
        gap: 20px;
        grid-template-columns: 1fr;
        grid-template-areas:
            "multibanner-autocredit__col-1"
            "multibanner-autocredit__col-2";
        padding-bottom: 10px;
    }

    .multibanner-autocredit__col-1 {
        gap: 20px;
    }

    .multibanner-autocredit__col-2 {
        flex-direction: column;
        row-gap: 20px;
    }
}

/* медиа запросы конец */