/* Контейнеры с зафиксированными размерами исключают CLS */
.img-box {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 16px;
}

/* Эффект блюра до загрузки */
img.lazy {
    filter: blur(14px);
    transform: scale(1.02);
    transition: filter .4s ease, transform .4s ease, opacity .3s ease;
    opacity: .9;
}

/* Когда настоящая картинка прогружена */
img.lazy-loaded {
    filter: none;
    transform: none;
    opacity: 1;
}

/* Bg-изображения (для баннеров/карточек с background-image) */
[data-bg] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

[data-bg].lazy {
    filter: blur(14px);
    transform: scale(1.02);
    transition: filter .45s ease, transform .45s ease, opacity .3s ease;
    opacity: .9;
}

[data-bg].lazy-loaded {
    filter: none;
    transform: none;
    opacity: 1;
}

/* Утилиты аспект-ратио (пригодятся для квадратных 160x160 и баннеров) */
.ratio-1x1 {
    aspect-ratio: 1 / 1;
}

.ratio-4x3 {
    aspect-ratio: 4 / 3;
}

.ratio-16x9 {
    aspect-ratio: 16 / 9;
}

/* Reduce motion — без анимации проявления */
@media (prefers-reduced-motion: reduce) {

    img.lazy,
    [data-bg].lazy {
        filter: none !important;
        transform: none !important;
        transition: none !important;
        opacity: 1 !important;
    }
}