@use "../mixins" as *;
@use "../media" as *;

.cta {
    padding-block: var(--section-padding-y);

    @include tablet {
        padding-block: var(--section-padding-y);
        background-color: var(--color-light-accent);
        border-radius: var(--border-radius-50);
    }

    @include mobile-s {
        padding-block: calc(var(--section-padding-y) / 2);
        border-radius: 0;
    }

    &__inner {
        @include flex-center(space-between);

        position: relative;
        background-color: var(--color-light-accent);
        border-radius: var(--border-radius-50);
        padding: 80px;

        @include tablet {
            flex-direction: column;
            row-gap: 50px;
            padding: 0px;
        }

        @include mobile {
            padding: 0;
        }
    }

    &__content {
        @include tablet {
            max-width: 515px;
            width: 100%;
        }

        &-header {
            line-height: 100%;
        }

        &-description {
            margin-top: 0.8em;
            color: var(--color-dark-80);
            transition: color var(--transition-duration-03);
        }

        &-button {
            margin-top: 2.2em;

            @include tablet {
                margin-top: 1.5em;
            }
        }

    }

    &__grow {
        margin: -99px -80px -88px 0;
        position: relative;

        @include tablet {
            margin: 0;
        }

        &-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-30%, -55%);
            text-align: center;
            z-index: 10;
        }

        &-header {
            @include fluid-text(50, 40, 1380);
            font-weight: 700;
            line-height: 100%;
            color: var(--color-dark-80);

            @include mobile {
                @include fluid-text(40, 32, 550);
            }
        }

        &-description {
            @include fluid-text(18, 16, 1380);
            color: var(--color-dark-20);

            @include mobile {
                @include fluid-text(16, 14, 550);
            }
        }

        &-img {
            @include mobile {
                min-width: 343px;
            }
        }
    }
}