/**
 * Amasty Banner ID 38 - CLS Prevention Skeleton
 * Dynamic height with aspect-ratio for all screen sizes
 */

/* Shimmer animation */
@keyframes shimmer {
    0% {
        background-position: -468px 0;
    }
    100% {
        background-position: 468px 0;
    }
}

/* Parent container - use aspect-ratio for dynamic height */
.ambanner-3[data-position="3"] {
    aspect-ratio: 10 / 1;
}

/* Skeleton with aspect-ratio - fully dynamic */
.ambanner-3[data-position="3"] > div[data-banner-id="38"] {
    width: 100%;
    aspect-ratio: 10 / 1; /* 1500x150px = 10:1 ratio - automatically scales height based on width */
    background: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-size: 800px 104px;
    animation: shimmer 1.2s linear infinite;
    display: block;
}

/* Ensure image is responsive and covers skeleton */
.ambanner-3[data-position="3"] img {
    width: 100%;
    height: auto;
    display: block;
}