.overlay-container {
	position: relative;
	font-weight: 300;

	img {
		// min-height: 400px;
		// height: 400px;
		object-fit: cover;
		object-position: top center;
		max-height: 450px;
	}
	.overlay-image::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		color: #fff;
	}
	.overlay-content {
		// font-size: 2.5em !important;
		color: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		@include media-breakpoint-down(md) {
			width: 100%;
		}

		h1 {
			text-align: center;
		}
	}

	.h1 {
		font-size: 4rem;
		font-weight: inherit;
	}
	.h2,
	a {
		font-size: 1.5rem;
		color: #fff;
		font-weight: inherit;
	}
	a {
		&:hover {
			border: solid 2px $grey;
			background: $grey;
			color: #fff;
		}
	}
}

.offset-images {
	font-size: 2.5rem;

	img {
		width: 100%;
		height: 100%;
	}
	.offset-images__image-container {
		overflow: hidden;
	}
	&:hover img {
		-webkit-transform: scale(1.1) translateZ(0);
		transform: scale(1.1) translateZ(0);
		transition: -webkit-transform 4s linear;
		transition: transform 6s linear;
		transition: transform 6s linear, -webkit-transform 6s linear;
	}
	.offset-images__btn {
		text-align: center;
		font-size: 1.75rem;
	}
	.offset-images__btn a {
		@media screen and (min-width: 767px) {
			width: 50%;
		}
		font-size: 1.75rem;
	}
	.nav-link:hover {
		transform: scale(1.1);
		-webkit-transition: all 0.25s ease;
		-moz-transition: all 0.25s ease;
		-o-transition: all 0.25s ease;
		transition: all 0.25s ease;
	}
}