/* ===== ОБЩИЕ ПЕРЕМЕННЫЕ ДЛЯ НАСТРОЙКИ ===== */
:root {
    --thumb-width: 45px;      /* Ширина миниатюры */
    --thumb-height: 60px;     /* Высота (соотношение 3:4) */
    --thumb-gap: 8px;         /* Расстояние между миниатюрами (по горизонтали и вертикали) */
    --thumb-margin-top: 12px; /* Отступ от основной картинки до ряда миниатюр */
}

/* ===== 1. ОБЁРТКА МИНИАТЮР (flex-контейнер) ===== */
.t-slds__thumbsbullet-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;           /* Если не влазят – перенос на новую строку */
    justify-content: center !important;   /* Центрируем по горизонтали */
    align-items: center !important;       /* Выравниваем по вертикали (если разная высота) */
    gap: var(--thumb-gap) !important;     /* Отступы между миниатюрами */
    margin-top: var(--thumb-margin-top) !important;
    padding: 0 !important;
    font-size: 0 !important;              /* Убираем лишние пробелы */
}

/* ===== 2. ОБЁРТКА КАЖДОЙ МИНИАТЮРЫ (убираем лишнее) ===== */
.t-slds__thumbsbullet-wrapper .t-slds__bullet {
    padding: 0 !important;
    display: inline-block !important;     /* Для совместимости, но flex родителя всё равно управляет */
    line-height: 0 !important;
    font-size: 0 !important;
}

/* ===== 3. САМА МИНИАТЮРА (контейнер 3:4) ===== */
.t-slds__thumbsbullet {
    width: var(--thumb-width) !important;
    height: var(--thumb-height) !important;
    min-width: var(--thumb-width) !important;
    min-height: var(--thumb-height) !important;
    max-width: var(--thumb-width) !important;
    max-height: var(--thumb-height) !important;
    aspect-ratio: auto !important;        /* Отключаем авто-соотношение */

    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;                 /* Отступы теперь управляются gap в родителе */
    border: 2px solid transparent !important;
    border-radius: 4px !important;
    background: #f0f0f0 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    transition: border-color 0.3s ease, transform 0.3s ease !important;
}

/* ===== 4. ФОНОВОЕ ИЗОБРАЖЕНИЕ (заполняет миниатюру) ===== */
.t-slds__thumbsbullet .t-slds__bgimg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;

    background-size: cover !important;
    background-position: 50% 50% !important;
    background-repeat: no-repeat !important;

    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    display: block !important;
}

/* ===== 5. ДОПОЛНИТЕЛЬНАЯ ОБЁРТКА (если есть) ===== */
.t-slds__thumbsbullet .t-slds__bgimg-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}



@media screen and (max-width:640px){

    /* 2 карточки в ряд */
    .t686__container .t-card__col{
        width:50% !important;
        max-width:50% !important;
        float:left !important;
        margin:0 !important;
        padding:4px !important;
        box-sizing:border-box;
    }

    .t686__container:after{
        content:"";
        display:block;
        clear:both;
    }

    /* карточка 3:4 */
    .t686__table{
        position:relative;
        height:0 !important;
        padding-bottom:133.333% !important;
        min-height:0 !important;
        overflow:hidden;
    }

    .t686__cell{
        position:absolute;
        inset:0;
        display:block !important;
    }

    .t686__bg,
    .t686__overlay{
        position:absolute;
        inset:0;
    }

    /* текст */
    .t686__textwrapper{
        position:absolute !important;
        left:0;
        right:0;
        bottom:0 !important;
        top:auto !important;
        height:auto !important;
        padding:0 10px 12px !important;
        z-index:5;
    }

    .t686__textwrapper__content,
    .t686__inner-wrapper{
        display:block !important;
        height:auto !important;
        margin:0 !important;
        padding:0 !important;
    }

    .t-card__title{
        padding-top:0 !important;
        margin:0 !important;
        text-align:center !important;
    }

    .t-card__title div{
        text-align:center !important;
    }