Content Text Over Image

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

.block-text-over-image {
	width: 100%;
	height: 60vh;
	position: relative;
	aspect-ratio: 1920/1080;
	margin: 0 auto;
	overflow: hidden;
	@include padding-bottom( rem-calc(60) );
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;

	@include bp($md) {
		height: 100vh;
		max-height: rem-calc(1080);
	}

	&:before {
		width: rem-calc(300);
		height: rem-calc(300);
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		transform: translate3d(-50%,-20%,0);
		background: $light-blue;
		opacity: 0.5;
		filter: blur(76px);
		border-radius: 100%;
		z-index: 6;

		@-moz-document url-prefix() {
			opacity: 0.5;
		}

		@include bp($md) {
			width: rem-calc(700);
			height: rem-calc(700);
			filter: blur(142px);
		}
	}

	&:after {
		width: rem-calc(350);
		height: rem-calc(350);
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		transform: translate3d(-10%,-50%,0);
		background: $secondary;
		filter: blur(125px);
		border-radius: 100%;
		z-index: 5;

		@-moz-document url-prefix() {
			opacity: 0.5;
		}

		@include bp($md) {
			width: rem-calc(700);
			height: rem-calc(700);
			filter: blur(350px);
		}
	}

	.container {
		position: relative;
		z-index: 10;
	}

	&__heading-container {
		position: relative;
	}

	.heading {
		margin-bottom: 0;
		font-weight: 800;
		position: relative;
		// font-size: 140px;
		// font-size: clamp(32px, 12vw, 140px);
		text-transform: uppercase;
		color: var(--text-color);

		// @include fluid-type(32, 140);
		@include fluid-type(32, 100);

		@include bp($md) {
			font-size: 80px;
			font-size: clamp(32px, 12vw, 80px);
		}

		@include bp(1500px) {
			font-size: 130px;
			font-size: clamp(32px, 12vw, 130px);
		}

		&.has-arrow {
			&:before {
				width: 12vw;
				max-width: 300px;
				height: 1ch;
				content: '';
				display: inline-block;
				margin-right: rem-calc(16);
				background-image: url('/wp-content/themes/british-esports/assets/icons/arrow-right--white.svg');
				background-repeat: no-repeat;
				background-position: calc(80%) center;

				@include bp($md) {
					height: 1ch;
				}

				@include bp(1500px) {
					width: 18vw;
					margin-right: rem-calc(32);
				}
			}
		}
	}

	p {
		max-width: 600px;
		@include fluid-type(16, 24);
		font-weight: 500;
		line-height: 1.5;
		margin-top: 1rem;
		margin-bottom: 0;
		color: var(--text-color);

		&.floating {
			@include bp($md) {
				font-size: 26px;
				font-size: clamp(4px, 2vw, 26px);
			}

			@include bp($lg) {
				font-size: 23px;
				font-size: clamp(4px, 2vw, 23px);
			}

			@include bp(1500px) {
				width: 50%;
				position: absolute;
				bottom: rem-calc(0);
				right: 0;
				margin-top: 0;
			}
		}
	}

	&__button-col {
		display: flex;
		flex-direction: row;
		align-items: center;
		@include margin-top( rem-calc(50) );

		@include bp($lg) {
			justify-content: flex-end;
		}
	}

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

		&:before {
			width: 100%;
			height: 100%;
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(to bottom, rgba($primary, 0), $primary);
			pointer-events: none;
			z-index: 3;
		}

		&:after {
			width: rem-calc(500);
			height: rem-calc(500);
			content: '';
			border-radius: 100%;
			background: $light-blue;
			opacity: 0.5;
			filter: blur(76px);
			pointer-events: none;
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 4;
			transform: translate3d(50%, 50%, 0);

			@include bp($md) {
				width: rem-calc(1000);
				height: rem-calc(1000);
				filter: blur(142px);
			}
		}
	}
}