:root {
    --tmb-banners--columns: 1;
    --tmb-banners--gap: 16px;
    --tmb-banners--aspect-ratio: 4;
}

.tmb-banners__list {
    padding: 0;
    margin: calc(var(--tmb-banners--gap) * -1) 0 0 calc(var(--tmb-banners--gap) * -1);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    pointer-events: none;
}
.tmb-banners__item {
    width: calc(100% / var(--tmb-banners--columns) - var(--tmb-banners--gap));
    margin-top: var(--tmb-banners--gap);
    margin-left: var(--tmb-banners--gap);
    flex-shrink: 0;
}
.tmb-banners__item-link {
    pointer-events: auto;
    display: block;
    position: relative;
    padding-bottom: calc(100% / var(--tmb-banners--aspect-ratio));
}
.tmb-banners__item-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 576px) {
    :root {
        --tmb-banners--gap: 20px;
    }
}
@media (min-width: 768px) {
    .tmb-banners[data-columns="2"] {--tmb-banners--columns: 2}
    .tmb-banners[data-columns="3"] {--tmb-banners--columns: 2}
}
@media (min-width: 1200px) {
    :root {
        --tmb-banners--gap: 24px;
    }

    .tmb-banners[data-columns="3"] {--tmb-banners--columns: 3}
}