Content Overlap

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

.block-content-overlap {
	padding-top: 0;
	padding-bottom: 0;

	@include bp($sm) {
		padding-top: rem-calc(60);
		padding-bottom: rem-calc(60);
	}

	.heading {
		@include fluid-type(28, 34);
	}

	&__content {
		background-color: $white;
		position: relative;
		z-index: 2;
		padding: rem-calc(20);

		@include bp($lg) {
			padding: rem-calc(60);

			.block-content-overlap--disable & {
				padding: 0;
			}
		}

		.align-items-start & {
			@include bp($lg) {
				margin-top: rem-calc(-60);
			}
		}

		.align-items-end & {
			@include bp($lg) {
				margin-bottom: rem-calc(-60);
			}
		}
	}

	.align-items-start {
		@include bp($lg) {
			margin-top: rem-calc(60);
		}
	}

	.align-items-end {
		@include bp($lg) {
			margin-bottom: rem-calc(60);
		}
	}

	&__copy {
		p {
			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}

	&__buttons {
		margin-top: rem-calc(30);
	}

	&__image {
		display: block;

		img {
			width: 100%;
		}
	}

	&__video {
		position: relative;

		&:hover {
			img {
				transform: scale(1.3);
			}
		}

		picture {
			overflow: hidden;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba($darkBlue, 0.5);
			}
		}

		img {
			transition: transform 4s ease-out;
			transform: scale(1.05);
		}

		&:hover {
			img {
				transform: scale(1.3);
			}

			&:after {
				background-color: $lightBlue;
			}
		}

		&:after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateY(-50%) translateX(-50%);
			width: rem-calc(72);
			height: rem-calc(72);
			background-color: $white;
			border-radius: 50%;
			background-image: url('#{$asset-path}/icons/icon-play.svg');
			background-size: 25%;
			background-repeat: no-repeat;
			background-position: center;
			transition: all 0.3s ease-out;
		}
	}

	&__image-column {
		@include bp($lg) {
			margin-left: calc(2 / 12 * -100%);

			.block-content-overlap--disable & {
				margin-left: 0;
			}
		}
	}

	&__content-column {
		.flex-row-reverse & {
			@include bp($lg) {
				margin-left: calc(2 / 12 * -100%);

				.block-content-overlap--disable & {
					margin-left: 0;
				}
			}
		}
	}
}