Content Quote Over Image

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

.block-quote-over-image {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	@include bp($lg) {
		max-height: 90vh;
	}

	.container {
		@include padding-top( rem-calc( 300 ) );
		@include padding-bottom( rem-calc( 100 ) );
		position: relative;
		z-index: 5;
		margin-top: auto;

		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.content-container {
		@include margin-bottom( rem-calc( 42 ) );
		color: var( --text-color );

		p,
		* {
			color: var( --text-color );
			line-height: 1;
			margin-bottom: 0;
			font-family: $font-family-primary;
			line-height: 1.3;
			margin: 0 0 1rem;
			text-transform: uppercase;
			font-weight: 800;
			// @include fluid-type(28, 70);
			@include fluid-type(20, 50);
		}
	}

	.author {
		color: var( --text-color );
		@include fluid-type(16, 18);
		line-height: 1.5;
		font-weight: bold;
		margin-bottom: 0;

		&__subline {
			font-weight: normal;
		}
	}

	&__image {
		display: flex;
		flex-direction: column;
		pointer-events: none;
		z-index: 2;

		&:before,
		&:after {
			width: 100%;
			height: 100%;
			content: '';
			position: absolute;
			inset: 0;
			pointer-events: none;
		}

		&:before {
			@include gradient-diagonal();
			z-index: 1;
			opacity: 0.3;
		}

		&:after {
			background-image: linear-gradient(to top, $primary, rgba($primary, 0));
			z-index: 2;
		}

		img {
			object-fit: cover;
		}
	}
}