
.custom-s-call-to-action-container {
	&,
	&:link,
	&:visited {
	    transition: color var(--custom-s--time--trans-dur, .3s) ease, background-color var(--custom-s--time--trans-dur, .3s) ease;
		background: var(--custom-s--color--primary, #333333);
		color: var(--custom-s--color--text-light, #ffffff);
		margin-bottom: 2rem;
	    position: relative;
		display: grid;
		grid-template-areas: 'cta';
	}
	&:active,
	&:hover {
	    text-decoration: none;

		& .custom-s-call-to-action-image:after {
			opacity: .8;
		}

		& .custom-s-call-to-action-svg-icon {
			transform: rotateX(180deg);
		}
	}

	&:not(:has(.custom-s-call-to-action-image)) {
		aspect-ratio: 3 / 2;
	}
}

.custom-s-call-to-action-image {
	grid-area: cta;
    width: 100%;
    height: 100%;

	&:after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	    width: 100%;
	    height: 100%;
	    background-color: var(--custom-s--color--secondary, #000000);
		opacity: .25;
		transition: opacity .33s;
	}

	& img {
	    display: block;
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	    object-position: center center;
	}
}

.custom-s-call-to-action-text-wrap {
	grid-area: cta;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1em;
	padding: 1rem;
	font-size: 1rem;
	z-index: 2;
}
.custom-s-end .custom-s-call-to-action-text-wrap {
	justify-content: flex-end;
}
.custom-s-space-between .custom-s-call-to-action-text-wrap {
	justify-content: space-between;
}

.custom-s-call-to-action-copy {
	flex: 0 1 auto;
    line-height: 1.2;
    text-align: center;
	font-weight: var(--custom-s--font--primary-bold);
	text-shadow: 0px 0px 5px #00000066;
}
