.banners-block {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, clamp(117px, 5.034rem + 10.128vw, 275px));
    gap: clamp(10px, 0.423rem + 0.897vw, 24px);
}

.banners-block--type1 {
    grid-template-areas:
            "one two two three"
            "one four five three";
}

.banners-block--type2 {
    grid-template-areas:
            "one one two two"
            "three four five six";
}

@media (max-width: 576px) {
    .banners-block {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, auto);
    }
    .banners-block--type1 {
        grid-template-areas:
            "two two"
            "four four"
            "one three"
            "five five"
    }

    .banners-block--type2 {
        grid-template-areas:
            "one one"
            "three four"
            "two two"
            "five six"
    }
    .banners-block-image {
        max-height: auto !important;
    }
}

.banners-block-image {
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: -webkit-fill-available;
}
.banners-block-image img {
    max-width: inherit;
    max-height: inherit;
    height: auto;
    transition-duration: 0.3s;
    border-radius: 30px;
}

.banners-block-image:hover img {
    filter: saturate(1.3);
    transition-duration: 0.3s;
    box-shadow: 0 0 0 3px #e3a455;
}
.banners-block-image-1 {
    grid-area: one;
}
.banners-block-image-2 {
    grid-area: two;
}
.banners-block-image-3 {
    grid-area: three;
}
.banners-block-image-4 {
    grid-area: four;
}
.banners-block-image-5 {
    grid-area: five;
}
.banners-block-image-6 {
    grid-area: six;
}