.cta {
	position: relative;
}
.cta-cont .cta .img-cont img {
	width: 100%;
	object-fit: cover;
}
.cta-cont .cta .img-cont {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 36%);
}

.cta-cont > div:last-child .cta .img-cont {
	clip-path: polygon(0 0, 100% 64%, 100% 100%, 0 100%);
}
.cta .conctent {
	position: absolute;
	top: 0;
	z-index: 1;
	display: grid;
	gap: var(--space-2);
}
.cta-cont > div:first-child .cta .conctent {
	right: 0;
	display: grid;
	justify-items: end;
	text-align: right;
	padding-right: 15px;
	padding-top: 37px;
}
.cta-cont > div:last-child .cta .conctent {
	top: unset;
	bottom: 0;
	left: 0;
	padding-left: 15px;
	padding-bottom: 25px;
	width: 100%;
}

.cta .conctent h3 {
	font-size: 2.5rem;
	font-family: var(--font-display-base);
	line-height: var(--leading-none);
	max-width: 276px;
	text-transform: uppercase;
}
.cta .conctent h3 span {
	display: inline-block;
}
.cta .conctent h3 span.alt-font {
	font-family: var(--font-display-rivers);
}

.cta .conctent h3 span:nth-child(2) {
	margin-right: 9px;
}

.cta-cont > div:last-child {
	margin-top: calc(-81% + 14px);
}

.cta-cont .img-cont,
.cta-cont {
	position: relative;
}
.cta-cont .img-cont:before {
	content: '';
	position: absolute;
	left: 0;
	height: 100%;
	width: 100%;
	top: 0;
	background-color: #00000033;
	pointer-events: none;
}
.cta-cont:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	pointer-events: none;
	background-image: url(/includes/public/assets/shared/cta-tag.svg);
	background-repeat: no-repeat;
	background-position: center;
}

@media (min-width: 40em) {
	.cta-cont > div:last-child {
		margin-top: calc(-50% + 9px);
	}
}

@media (min-width: 64em) {
	.cta-cont .cta .img-cont {
		clip-path: polygon(0% 0%, 91% 0%, 61% 100%, 0% 100%);
		margin-right: -31%;
	}
	.cta-cont > div:last-child .cta .img-cont {
		clip-path: polygon(40% 0, 100% 0, 100% 100%, 10% 100%);
		margin-left: -31%;
		margin-right: 0;
	}
	.cta-cont > div:last-child {
		margin-top: 0;
	}
	.cta-cont > div:first-child .cta .conctent,
	.cta-cont > div:last-child .cta .conctent {
		padding: 0;
		justify-items: center;
		text-align: center;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		right: unset;
		gap: var(--space-5);
	}
	.cta-cont > div:last-child .cta .conctent {
		display: grid;
		width: max-content;
		bottom: unset;
	}
	.cta-cont .cta .conctent .custom-button {
		justify-content: center;
		margin-bottom: 0;
	}
}

@media (min-width: 85em) {
	.cta .conctent h3 {
		font-size: 3.125rem;
		max-width: 344px;
	}
	.cta-cont:after {
		background-size: 150px;
	}
}