.single-hero-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #000;
}

.single-hero-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.single-hero-image {
    position: relative;
    width: 100%;
    height: 100%;
}

.single-hero-image a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Desktop image container */
.single-hero-desktop-image {
    width: 100%;
    height: 100%;
    display: none;
}

/* Mobile image container */
.single-hero-mobile-image {
    width: 100%;
    height: 100%;
    display: none;
}

/* Base image styles */
.single-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Mobile styles */
@media (max-width: 767px) {
    .single-hero-section {
        aspect-ratio: 1080/450;
        height: auto !important;
    }

    .single-hero-mobile-image {
        display: block;
    }

    .single-hero-desktop-image {
        display: none;
    }
}

/* Desktop styles */
@media (min-width: 768px) {
    .single-hero-section {
        aspect-ratio: 1920/850;
        height: auto !important;
    }

    .single-hero-desktop-image {
        display: block;
    }

    .single-hero-mobile-image {
        display: none;
    }
}

/* Fix for a3 lazy load */
.lazy-loaded {
    transition: opacity 0.3s;
}

/* Ensure proper sizing when lazy load completes */
.single-hero-desktop-image .lazy-loaded,
.single-hero-mobile-image .lazy-loaded {
    width: 100%;
    height: 100%;
    object-fit: cover;
}