/* 普通横幅样式 */

.normal-banner {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
    background: white; /* 底色占位，避免加载/切换时闪白 */
}

.normal-banner-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: white; /* 底色占位 */
    aspect-ratio: 96 / 17; /* 预留高度，避免图片绘制前空白/抖动；如比例不对可改 */
    min-height: 200px;
    position: relative;
}

.normal-banner-container img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    will-change: opacity;
}

.normal-banner-container img.loaded {
    opacity: 1;
}

/* 加载中骨架流光（可去掉） */
.normal-banner-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
    transform: translateX(-100%);
    animation: normalBannerLoading 1.4s infinite;
    pointer-events: none;
}

.normal-banner-container.img-loaded::before {
    display: none;
    animation: none;
}

@keyframes normalBannerLoading {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}