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

.c-cta {
    background: rgba(var(--color-primary));
    border-top-left-radius: calc-rem(25px);
    border-top-right-radius: calc-rem(25px);
    margin-top: calc-rem(-25px);
    position: relative;
    overflow: hidden;

    &__wrapper {
        position: relative;
        padding-block: calc-rem(40px) 0;
        z-index: 3;

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

        }

        .content {
            color: rgba(var(--color-white));

            @include media-breakpoint-up(lg) {
                text-align: center;
            }

            .title {
                color: rgba(var(--color-white));
            }

            .buttons {
                margin-top: calc-rem(40px);

                @include media-breakpoint-up(lg) {
                    justify-content: center;
                }
            }
        }

    }

    &__employee-thumb {
        position: relative;
        width: 100%;
        height: calc-rem(200px);
        display: flex;
        justify-content: flex-end;
        margin-top: calc-rem(-45px);
        z-index: 2;
        margin-bottom: calc-rem(20px);

        @include media-breakpoint-up(md) {
            margin-top: 0;
        }

        @include media-breakpoint-up(lg) {
            margin-top: 0;
            height: 100%;
            align-items: flex-end;
        }

        img {
            position: absolute;
            width: auto;
            object-fit: contain;
            height: calc-rem(200px);
            bottom: 0;

            @include media-breakpoint-up(md) {
                height: auto;
                max-height: calc-rem(300px);
            }

            @include media-breakpoint-up(lg) {
                bottom: calc-rem(20px);
                max-height: calc-rem(350px);
            }
        }

    }

    &__background {
        position: absolute;
        z-index: 1;
        inset: 0;
    }
}
