Meet The Team Cta

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

.meet-the-team-cta-outer {
	position: relative;
	padding-top: 3.75rem;
	padding-bottom: 3.75rem;

	&:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		background-color: var(--lighter-colour);
		transition: all 0.5s ease-in-out;
		transition-delay: 0.5s;
	}
	&.aos-animate {
		&:before {
			height: 50%;
		}
	}
	.double-cta {
		display: flex;

		@include media-breakpoint-down(sm) {
			flex-direction: column;
		}
	}
}

.meet-the-team-cta {
	width: 100%;
	display: block;
	background-color: var(--theme-colour);
	position: relative;
	z-index: 2;
	padding: 2rem 2.5rem;
	min-height: 40rem;
	overflow: hidden;

	@include media-breakpoint-down(md) {
		min-height: 36rem;
	}
	@include media-breakpoint-down(sm) {
		padding: 3rem 1.5rem 8rem 1.5rem;
	}
	@include media-breakpoint-down(xs) {
		min-height: 30rem;
	}
	&.half {
		min-height: 0;
		padding-bottom: 16rem;
		width: calc(50% - 1.5rem);

		@include media-breakpoint-down(sm) {
			width: 100%;
			min-height: 30rem;
		}
		&:first-child {
			margin-right: 1.5rem;

			@include media-breakpoint-down(sm) {
				margin: 0 0 2rem 0;
			}
		}
		&:last-child {
			margin-left: 1.5rem;

			@include media-breakpoint-down(sm) {
				margin: 0;
			}
		}
		picture img {
			height: 16rem;
			object-fit: contain;
			object-position: bottom;
		}
	}
	h2 {
		position: relative;
		z-index: 3;
		max-width: 80%;
	}
	p {
		position: relative;
		z-index: 3;
		font-weight: bold;
		max-width: 30rem;
		font-size: 1rem;
	}
	picture img {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: auto;
		z-index: 3;
		display: block;
	}
	.email {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 3;
		padding: 0.75rem 1rem;
		background: #fff;
	}
}