Case Study Large

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

.block-case-study-large {
    .p-relative {
        background: linear-gradient(90deg, #263238 0%, rgba(38, 50, 56, 0) 100%);
        border-radius: 20px;
    }

    h3 {
        color: $white;
        @include margin-bottom(rem-calc(40));
    }

    .heading {
        @include fluid-type(32, 70, 375, $max-container-size);
        line-height: 100%;
        color: $white;
        @include margin-bottom(rem-calc(40));
        font-weight: 700;
        max-width: 100%;
    }

    .header {
        color: $white;
        @include margin-bottom(rem-calc(40));
    }

    p {
        color: $white;
        font-weight: 400;
        @include margin-bottom(rem-calc(42));
        max-width: 80%;

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

    &__btn {
        display: flex;
        align-items: center;
        gap: 1.875rem;

        @include bp($xl, true) {
            gap: 0.875rem;

            .btn {
                @include margin-bottom(rem-calc(24));
            }
        }

        @include bp($sm, true) {
            display: block;

            .btn {
                @include margin-bottom(rem-calc(1.5rem));
            }
        }

        .btn--primary {
            &:hover {
                background-color: $white;
                border: 0.063rem solid $white;
                color: $primary;
            }
        }
    }

    &__float {
        background-color: $white;
        max-width: 20.75rem;
        padding: 2.813rem;
        @include padding(rem-calc(2.813rem));
        bottom: 6.25rem;
        right: 7.188rem;
        position: absolute;

        &--2 {
            right: 29.188rem;

            @include bp($xxl, true) {
                right: 7.188rem;
                bottom: 24rem;
            }
        }

        @include bp($lg, true) {
            left: 0;
            right: 0;
            bottom: 1.25rem;
            max-width: 100%;
            position: initial;
            @include margin-bottom(rem-calc(20));
        }

        h3 {
            color: $primary;
            @include margin-bottom(rem-calc(7));

            &.title--large {
                font-size: 40px;
            }

            &.title--x-large {
                font-size: 70px;
            }
        }

        h6 {
            font-weight: 400;
        }
    }

    &__bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;

        @include bp($lg, true) {
            object-fit: cover;
        }

        img {
            width: 100%;
            height: 100%;
            border-radius: 20px;
            object-fit: cover;

            @include bp($lg, true) {
                object-fit: cover;
            }
        }
    }
}