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

.image-cta {
    margin-block: calc-rem(60px);

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

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

    &__image {
        border-radius: var(--border-radius);
        overflow: hidden;
        width: 100%;
        height: auto;;
        aspect-ratio: aspect-ratio(970, 500);
        margin-bottom: calc-rem(20px);


        @include media-breakpoint-up(lg) {
            margin-top: calc-rem(30px);
            height: calc-rem(500px);
        }

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

    }

    &__cta {
        background: rgba(var(--color-primary));
        color: rgba(var(--color-white));
        padding: calc-rem(35px 30px);
        border-radius: var(--border-radius);
        position: relative;
        z-index: 2;

        @include media-breakpoint-up(lg) {
            margin-bottom: -100%;
            padding: calc-rem(65px 60px);
        }

        .title {
            color: rgba(var(--color-white));
            max-width: calc(100% - 2rem);
        }

    }

}
