Cta

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-cta {
    text-align: center;

    &__wrapper {
        background-color: $light-blue;
        @include padding(rem-calc(5.125rem 3rem));
        max-width: 67.25rem;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        position: relative;

        &::before {
            width: 100%;
            aspect-ratio: 1080/1920;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            background-repeat: no-repeat;
            background-size: cover;
            opacity: 0;
            transition: 0.6s var(--ease);
            transition-property: opacity;
            transform: matrix(-1, -0.09, -0.27, 0.96, 0, 0);

            @include bp($lg) {
                aspect-ratio: 1920/1080;
                background-size: contain;
            }

            @include bp($md, true) {
                transform: none;
            }
        }

        &.active {
            &:before {
                opacity: 1;
            }
        }

        &.left {
            &:before {
                transform: translate3d(0, -15%, 0);
                background-position: left center;
                background-image: url("/wp-content/themes/hub-box/assets/images/bg-gradient--left.svg");
            }
        }

        &.right {
            &:before {
                background-position: right center;
                top: -70px;
                transform: matrix(1, 0, 0, -1, 0, 0);
                left: 100px;
                background-image: url("/wp-content/themes/hub-box/assets/images/bg-gradient--right.svg");

                @include bp($lg, true) {
                    left: 0;
                }
            }
        }

        &.center {
            &:before {
                background-position: center center;
                transform: matrix(-1, -0.1, -0.25, 0.97, 0, 0);
                bottom: -60px;
                left: 200px;
                top: auto;
                background-image: url("/wp-content/themes/hub-box/assets/images/bg-gradient--right.svg");
            }
        }

        @include bp($lg, true) {
            @include padding(rem-calc(2.125rem 1rem));
        }

        h2 {
            @include margin-bottom(rem-calc(1.063rem));
            margin-left: auto;
            margin-right: auto;
            color: $secondary;
            @include bp($lg, true) {
                max-width: 100%;
            }
        }

        .heading {
            @include margin-bottom(rem-calc(1.063rem));
            margin-left: auto;
            margin-right: auto;
            color: $secondary;
            @include fluid-type(28, 50, 375, $max-container-size);
            line-height: 100%;
            font-weight: 700;

            @include bp($lg, true) {
                max-width: 100%;
            }
        }

        p {
            margin-left: auto;
            margin-right: auto;
            @include margin-bottom(rem-calc(2.438rem));
            font-weight: 400;
            @include bp($lg, true) {
                max-width: 100%;
            }
        }
    }

    &__text-wrapper {
        max-width: 70%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;

        p {
            text-align: center;
            color: $secondary;
        }
        @include bp($lg, true) {
            max-width: 100%;
        }
    }
}