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

.cta-blocks-employee {
    padding-block: calc-rem(40px);

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

    &__cta {
        padding: calc-rem(40px) calc-rem(30px);
        background: rgba(var(--color-primary));
        color: rgba(var(--color-white));
        border-radius: var(--border-radius);
        height: 100%;
        overflow: hidden;

        @include media-breakpoint-up(xl) {
            padding: calc-rem(50px);
        }

        .title {
            color: rgba(var(--color-white));
            font-size: clamp-font(14px, 18px)
        }

        & > * {
            position: relative;
            z-index: 2;
        }

        .background {
            position: absolute;
            width: 100%;
            height: 100%;
            inset: 0;
            z-index: 0;
            pointer-events: none;
        }
    }

    &__employee-cta {
        padding: calc-rem(40px) calc-rem(30px);
        background: rgba(var(--color-background));
        border-radius: var(--border-radius);
        height: 100%;
        position: relative;
        margin-top: calc-rem(20px);
        overflow: hidden;

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

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

        & > * {
            position: relative;
            z-index: 2;
        }

        .title {
            font-size: clamp-font(14px, 18px)
        }

        .employee {
            position: absolute;
            height: 80%;
            right: calc-rem(60px);
            bottom: 0;
            display: none;

            @include media-breakpoint-up(md) {
                display: block;
            }
        }

        .background {
            position: absolute;
            width: 100%;
            height: 100%;
            inset: 0;
            z-index: 0;
            pointer-events: none;
        }
    }


}
