.section_banners {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.banner {
    display: block;
    position: relative;
    padding-bottom: 44.375%;
    overflow: hidden;
    border-radius: 24px;
}

.banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000022;
    opacity: 0;
    transition: opacity 0.2s;
}

.banner:hover::after {
    opacity: 1;
}

.banner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .section_banners {
        grid-template-columns: 1fr;
    }

    .banner {
        padding-bottom: 98.507%
    }
}