.custom-parallax {
	margin-bottom: var(--space-12);
}

.custom-parallax > .inner {
	position: relative;
}

/* Image */
.custom-parallax .img-cont {
	margin-bottom: var(--space-4);
	max-height: 600px;
	overflow: hidden;
}
.custom-parallax .img-cont img {
	width: 100%;
}

/* Content */
.custom-parallax .content-section {
	padding: 0 15px;
}

.custom-parallax .content-section .subtitle {
	font-family: var(--font-display-alt);
	font-size: 15px;
	font-weight: 600;
	line-height: 19px;
	letter-spacing: .02em;
	color: var(--dark-blue);
}

.custom-parallax .content-section .title {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 700;
	line-height: 27px;
	letter-spacing: 0;
	color: var(--dark-blue);
	margin-bottom: var(--space-2);
	text-transform: uppercase;
}

.custom-parallax .content-section .description {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 22px;
	letter-spacing: .02em;
	color: var(--dark-gray);
	margin-bottom: var(--space-6);
}

.custom-parallax .content-section .read-more {
	padding: var(--space-2) var(--space-6);
	background: var(--background-gradient);

	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	font-style: italic;
	letter-spacing: .04em;
	color: white;
	position: relative;
}
.custom-parallax .content-section .read-more::before {
	content: url(/includes/public/assets/shared/icon-arrow-right-white.svg);
	position: absolute;
	right: 25px;
	top: calc(50% + 3px);
	transform: translate(0, -50%);
	opacity: 0;
	transition: all ease-in-out 0.6s;
	width: 6.5px;
	z-index: 3;
}

.custom-parallax .content-section .read-more span {
	z-index: 3;
	position: relative;
}

.custom-parallax .content-section .read-more::after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: var(--light-blue);
	opacity: 0;
	transition: opacity .6s ease-in-out;
	z-index: 1;
}

@media (hover: hover) {
	.custom-parallax .content-section .read-more:hover::before {
		transform: translate(15px, -50%);
		opacity: 1;
	}
	.custom-parallax .content-section .read-more:hover::after {
		opacity: 1;
	}
}

@media (min-width: 64em) {
	.custom-parallax .content-section {
		position: absolute;
		bottom: 0;
		top: 0;
		left: 0;
		width: 45%;
		min-width: 600px;
		max-width: 750px;
		border-top-right-radius: var(--rounded-full);
		border-bottom-right-radius: var(--rounded-full);
		background: rgba(255,255,255, .8);
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.custom-parallax .content-section .content-inner {
		position: relative;
		z-index: 3;
		width: 60%;
		max-width: 420px;
		margin-left: 50px;
	}

	.custom-parallax .content-section::after {
		position: absolute;
		content: '';
		top: -22px;
		left: 0;
		height: calc(100% + 44px);
		width: calc(100% + 22px);
		border-top-right-radius: var(--rounded-full);
		border-bottom-right-radius: var(--rounded-full);
		background-color: white;
		opacity: 20%;
	}
	.custom-parallax .content-section::before {
		position: absolute;
		content: '';
		top: -22px;
		left: 0;
		height: calc(100% + 44px);
		width: calc(100% + 22px);
		border-top-right-radius: var(--rounded-full);
		border-bottom-right-radius: var(--rounded-full);
		background: url(/includes/public/assets/shared/pattern-radial-white-solid.png);
		background-repeat: repeat;
		background-size: 241px;
		opacity: 40%;
	}

	.custom-parallax .content-section .read-more {
		font-size: 15px;
		padding: var(--space-3) 44px;
	}

	.custom-parallax .content-section .read-more::before {
		right: 40px;
	}

	/* Img Container */
	.custom-parallax .img-cont picture {
		display: none;
	}
	.custom-parallax .img-cont {
		height: 600px;
		overflow: hidden;
		background-position: bottom center;
		background-attachment: fixed;
		background-size: cover;
		background-repeat: no-repeat;
		margin-bottom: var(--space-24);
	}
}

@media (min-width: 1440px) {
	.custom-parallax .content-section .content-inner {
		margin-left: 100px;
	}
	.custom-parallax .content-section .subtitle {
		font-size: 24px;
		line-height: 36px;
	}
	.custom-parallax .content-section .title {
		font-size: 44px;
		line-height: 48px;
		margin-bottom: var(--space-4);
	}
	.custom-parallax .content-section .description {
		font-size: 16px;
		line-height: 29px;
		margin-bottom: var(--space-12);
	}
	.custom-parallax .content-section .read-more::before {
		width: 7px;
		height: 16px;
	}

	@media (hover: hover) {
		.custom-parallax .content-section .read-more:hover::before {
			transform: translate(15px, -50%);
			opacity: 1;
		}
	}
}