Featured Image Content

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

.featured-image-content {
	background: var(--lighter-colour);

	&.no-bg {
		background: none;
	}
	.image-content {
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 0;
		padding-bottom: 0;
	}
	.image-side {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rem 3rem;

		@include media-breakpoint-down(lg) {
			padding: 5rem 3rem;
		}
		@include media-breakpoint-down(md) {
			padding: 3rem 2rem;

			&.has-map {
				min-height: 34rem;
			}
		}
		@include media-breakpoint-down(xs) {
			padding: 2rem 15px;
		}
		&:after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--theme-colour);
			transform: translateX(-100%);
			transition: transform 0.7s cubic-bezier(0.62, 0.38, 0.17, 0.85);
			transition-delay: 0.8s;
			z-index: 1;
		}
		.image {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.main-img {
			display: flex;
			justify-content: center;
			align-items: center;
			max-width: 80%;
			max-height: 80%;
		}
		img {
			display: block;
			margin: 0 auto;
		}
		.lines {
			position: absolute;
			right: 1.25rem;
			top: calc(100% - 3.5rem);
		}
	}
	&.switch {
		.content {
			position: relative;
			z-index: 2;
		}
		.image-side {
			&:after {
				transform: translateX(-200%);
			}
		}
		&.aos-animate {
			.image-side {
				&:after {
					transform: translateX(-100%);
				}
			}
		}
	}
	.image,
	.map {
		position: relative;
		z-index: 2;
	}
	.content-side {
		padding: 10rem 3rem;
		display: flex;
		justify-content: center;
		align-items: center;

		@include media-breakpoint-down(lg) {
			padding: 5rem 3rem;
		}
		@include media-breakpoint-down(sm) {
			display: block;
			padding: 5rem;
		}
		@include media-breakpoint-down(xs) {
			padding: 3rem 15px;
		}
		.content {
			max-width: 34rem;

			@include media-breakpoint-down(sm) {
				max-width: none;
			}
		}
		.buttons {
			margin-top: 3rem;

			@include media-breakpoint-down(xs) {
				margin-top: 2rem;
			}
		}
	}
	&.aos-animate {
		.image-side {
			&:after {
				transform: translateX(0);
			}
		}
	}
}

.community-partners-map {
	.image-side:after {
		display: none;
	}	
}