/* ============================================================ Swiper — overrides для вашей разметки Подключи в после swiper-bundle.min.css ============================================================ */ /* Контейнер не обрезает слайды справа */ #content-block-13-container { overflow: visible !important; } /* Высота враппера подтягивается под слайды */ #content-block-13-container .swiper-wrapper { align-items: stretch; } /* Каждый слайд — фиксированная ширина из Tailwind (259 / 326 / 384px) flex-shrink уже стоит на !flex-shrink-0, этого достаточно */ #content-block-13-container .swiper-slide { height: auto; } /* Изображение занимает всю высоту блока */ #content-block-13-container .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Пагинация — располагаем под слайдером */ [role="group"][aria-label="Review carousel pagination"] { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; margin-top: 32px; /* !pb-8 на wrapper = 2rem */ } /* Кнопки-точки */ [role="group"][aria-label="Review carousel pagination"] button { display: block; height: 8px; border: none; cursor: pointer; border-radius: 9999px; background: var(--bbl-grey-4, #C4C4C4); transition: width 0.3s ease, background 0.3s ease; padding: 0; outline: none; } /* Неактивная точка */ [role="group"][aria-label="Review carousel pagination"] button:not([aria-current]) { width: 8px; } [role="group"][aria-label="Review carousel pagination"] button:not([aria-current]):hover { background: var(--bbl-grey-6, #8C8C8C); } /* Активная точка — широкая полоска */ [role="group"][aria-label="Review carousel pagination"] button[aria-current="true"], [role="group"][aria-label="Review carousel pagination"] button.swiper-pagination-bullet-active { width: 48px; background: var(--bbl-grey-9, #1A1A1A); }