.hero-container {
    margin-top: 0 !important;
    position: relative;

    background-image: url('/imgs/industries/landscaping/hero_mobile.webp');
}

.gradient-overlay {
    &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #080808;
        background: linear-gradient(180deg,rgba(1, 5, 1, .8) 10%, rgba(222, 227, 231, 0) 60%);
    }
}

@media(min-width: 992px) {
    .hero-container {
        background-image: url('/imgs/industries/landscaping/hero_desktop.webp');
    }

    .gradient-overlay {
        &::after {
            background: linear-gradient(90deg,rgba(1, 5, 1, .7) 40%, rgba(222, 227, 231, 0) 60%);
        }
    }
}