.hero-video-wrapper {
    position: relative;
    width: 100%;
    max-height: 560px;
    overflow: hidden;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lazy-video-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive breakpoints */
@media (max-width: 768px) {
    .hero-video-wrapper {
        max-height: 400px;
    }
}

@media (max-width: 480px) {
    .hero-video-wrapper {
        max-height: 300px;
    }
}