/**
 * Single Hero Section Styles
 */

.single-hero {
    margin-bottom: 2rem;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-height: 600px;
    overflow: hidden;
}

.single-hero__media {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    max-height: 800px;
}

.single-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-height: 600px;
}

@media (max-width: 767px) {
    .single-hero {
        margin-bottom: 1.5rem;
        max-height: 300px;
    }
    
    .single-hero__media {
        max-height: 300px;
    }
    
    .single-hero__img {
        max-height: 300px;
    }
}