Large Testimonial

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-large-testimonial {
	position: relative;
	display: flex;
	align-items: center;
	
	&__wrapper {
		padding: rem-calc(50 0 50 0);
		position: relative;
		z-index: 5;
        @include bp($lg){
            padding: rem-calc(228 0 55 0);
        }
	}
	&__image img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 1;
	}
	.content {
		font-size: rem-calc(20);
        line-height: rem-calc(28);
        letter-spacing: 0.05em;
        font-weight: 400;
        margin-bottom: rem-calc(32);
        color: $white;
        max-width: rem-calc(856);

        @include bp($lg){
            font-size: rem-calc(40);
            line-height: rem-calc(48);
            margin-bottom: rem-calc(102);
        }
	}
    &-wrap{
        position: relative;
        background: $grey-tertiary;
        border-radius: 24px;
        padding: rem-calc(32 16);
        margin: 0 auto;
        
        @include bp($lg){
            padding: rem-calc(64 48 64 48);
            border-radius: 40px;
        }
    }
    .ts{
        
        &-wrap{
            display: flex;
            flex-direction: column-reverse;
            
            @include bp($lg){
                flex-direction: row;
                align-items: center;
            }
        }
        &-content{
            font-size: rem-calc(18);
            line-height: rem-calc(26);
            letter-spacing: 0.05em;

            @include bp($lg){
                font-size: rem-calc(24);
                line-height: rem-calc(32);
                &.has-logo{
                    width: 65%;
                    padding-right: rem-calc(113);
                }
            }

            .quote-icon{
                margin-bottom: rem-calc(28);
                @include bp($lg){
                    margin-bottom: rem-calc(48);
                }
            }

            p{
                font-size: rem-calc(18);
                line-height: rem-calc(26);
                letter-spacing: 0.05em;

                @include bp($lg){
                    font-size: rem-calc(24);
                    line-height: rem-calc(32);
                }

                &.ts-by{
                    font-size: rem-calc(18);
                    line-height: rem-calc(26);
                    letter-spacing: 0.05em;
                    margin: 0;
                    @include bp($lg){
                        font-size: rem-calc(20);
                        line-height: rem-calc(32);
                        width: 64.91%;
                        padding-right: rem-calc(74);
                    }
                }
            }
        }

        &-image{
            margin: 0 auto rem-calc(56) auto;
            @include bp($lg){
                margin: 0;
            }
        }
    }
	&.content-alignment-right {
		text-align: right;

		.block-basic-hero__wrapper {
			max-width: rem-calc(610);
		}
		.container {
			display: flex;
			justify-content: flex-end;
		}
		.btn {
			margin-right: 0;
			margin-left: 1rem;
		}
	}
	&.content-alignment-center {
		text-align: center;

		.btn {
			margin-right: 0.5rem;
			margin-left: 0.5rem;
		}
		.block-basic-hero__wrapper {
			max-width: rem-calc(610);
			margin: 0 auto;
		}
	}
	&.has-img {
		&:after {
			content: "";
			z-index: 2;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: rem-calc(375);
			background: rgb(0,0,0);
			background: linear-gradient(180deg, rgba(0,0,0,1) 0.09%, rgba(0,0,0,0) 99.75%);
		}
		&:before {
			content: "";
			z-index: 2;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgb(0,0,0);
			background: linear-gradient(90.1deg, #000000 0.09%, rgba(0, 0, 0, 0) 99.75%);
		}
		h1,
		h2,
		h3,
		h4,
		p {
			color: $white;
		}
	}
}