/* Start:/local/templates/main/template_styles.css?17930012901550*/
/* === Баннеры в меню: 4 в ряд и кликабельная карточка === */

/* ПК: 4 в ряд */
@media (min-width: 1024px) {
    ul.banners {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

/* Планшет: 2 в ряд */
@media (min-width: 668px) and (max-width: 1023px) {
    ul.banners {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Вся карточка кликабельна, кнопка скрыта */
ul.banners .banners__item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
ul.banners .banners__item .btn {
    position: absolute !important;
    inset: 0;
    z-index: 5;
    opacity: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
}
ul.banners .banners__item-wrapper {
    position: absolute !important;
    inset: 0;
    margin: 0;
    padding: 0;
}

/* Лёгкий эффект при наведении, чтобы было понятно, что это ссылка */
ul.banners .banners__item .picture__img {
    transition: transform .3s ease;
}
ul.banners .banners__item:hover .picture__img {
    transform: scale(1.04);
}

/* Скругление углов баннеров */
ul.banners .banners__item,
ul.banners .banners__item .picture,
ul.banners .banners__item .picture__img {
    border-radius: 24px;
}
ul.banners .banners__item,
ul.banners .banners__item .picture {
    overflow: hidden;
    isolation: isolate; /* чтобы углы не пропадали при увеличении на наведении */
}
/* End */
/* /local/templates/main/template_styles.css?17930012901550 */