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

.image-banner {
    padding-block: calc-rem(40px);

    @include media-breakpoint-up(md){
        padding-block: calc-rem(60px);
    }

    @include media-breakpoint-up(lg){
        padding-block: calc-rem(80px);
    }

    &__background {
        width: 100%;
        height: auto;
        aspect-ratio: aspect-ratio(300, 120);
        border-radius: var(--border-radius);
        overflow: hidden;

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

}
