Contact Callout Bar

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

.contact-callout-bar {
	padding-top: 3.875rem;
	padding-bottom: 3.875rem;
	position: relative;
	
	@include media-breakpoint-down(md) {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	&:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: var(--theme-colour);
		z-index: -1;
		transform: translateX(-100%);
		transition: transform 0.7s cubic-bezier(0.62, 0.38, 0.17, 0.85);
		transition-delay: 0.6s;
	}
	&.aos-animate {
		&:after {
			transition-delay: 0s;
			transform: translateX(0);
		}
	}
	.container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;

		@include media-breakpoint-down(sm) {
			flex-direction: column;
			align-items: flex-start;
		}
	}
	h3,
	h4 {
		margin-right: 1rem;
		
		@include media-breakpoint-down(md) {
			width: 100%;
		}
		span {
			display: block;
			font-size: 1rem;
			font-family: $font-stack-body;
			font-weight: 300;
			margin-top: 0.5rem;
		}
	}
	&.has-image {
		padding-top: 1rem;
		padding-bottom: 1rem;

		picture img {
			position: absolute;
			bottom: -1rem;
			height: calc(100% + 1.5rem);
			width: auto;
			left: 0;

			@include media-breakpoint-down(sm) {
				left: auto;
				right: 0;
			}
			@include media-breakpoint-down(xs) {
				height: 70%;
			}
		}
		.center-col {
			display: flex;
			flex-wrap: wrap;
			padding-left: 18rem;
			flex: 1;

			@include media-breakpoint-down(lg) {
				padding-left: 14rem;
			}
			@include media-breakpoint-down(sm) {
				padding-left: 0;
				padding-right: 3rem;
			}
		}
		h3,
		h4 {
			width: 100%;
		}
	}
	h3,
	h4,
	a {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
	a.contact-link {
		display: flex;
		align-items: center;
		margin: 1rem 2rem 1rem 0;
		color: $body;
		flex-shrink: 0;

		&:hover {
			color: $red;
		}
		img {
			display: block;
			margin-right: 0.875rem;
		}
	}
}