@use "../common/utils" as *;
@use "../common/mixins" as *;

.hero-image {

    &__background {
        width: 100%;
        height: auto;
        aspect-ratio: aspect-ratio(390, 320);

        @include media-breakpoint-up(lg) {
            aspect-ratio: aspect-ratio(1920, 500);
            max-height: calc-rem(500px);
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

}
