.custom-callout-tiles {
	/*==============================*/
	/*=====----- TEMPLATE -----=====*/
	/*==============================*/

	container-type: inline-size;
	margin-bottom: var(--widget-margin-bottom);
	text-align: center;
	color: var(--white);

	.widget-inner {
		--top-padding: 54px;
		--marquee-height: 60px;
		--widget-top-padding: var(--top-padding);
		--scrolling-graphic-width: 380px;

		position: relative;
		z-index: 4;
		padding: var(--widget-top-padding) var(--space-5) var(--space-5);
		background: var(--black);

		&::before,
		&::after {
			position: absolute;
			inset: 0;
			display: block;
			content: '';
			pointer-events: none;
		}

		&::before {
			z-index: -3;
			background: var(--background-texture);
			opacity: 0.125;
		}

		&::after {
			z-index: -2;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 53.48%, #000 83.72%);
		}
	}

	.template-title {
		margin-bottom: var(--space-10);
		font-family: var(--font-display);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-4xl);
		line-height: 1.14;
		letter-spacing: -0.1em;
		text-transform: uppercase;
		color: inherit;
	}

	.widget-background {
		position: absolute;
		inset: 0 auto auto 50%;
		z-index: -1;
		translate: -50% 0;
		width: 100%;
		max-width: 917px;
		height: 192px;
		pointer-events: none;

		.square-1,
		.square-2,
		.square-3 {
			position: absolute;
			display: block;
			background: rgba(124, 184, 152, 0.30);
		}

		.square-1 {
			inset: 0 var(--space-16) 26px;
		}

		.square-2 {
			inset: var(--space-3) 88px 15px;
		}

		.square-3 {
			inset: 26px 0 0;
		}
	}

	.slides {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-5);
		width: 100%;
		max-width: 1340px;
		margin: 0 auto;
	}

	/*----- scrolling marquee -----*/

	&:has(.scrolling-graphic) {
		.widget-inner {
			--widget-top-padding: calc(var(--top-padding) + var(--marquee-height));
		}

		.widget-background {
			top: var(--marquee-height);
		}
	}

	.scrolling-graphic {
		position: absolute;
		inset: 0 0 auto;
		height: var(--marquee-height);
		background:
			url('/includes/public/assets/shared/callout-tiles-5-across-scrolling-graphic.svg') repeat-x left center / var(--scrolling-graphic-width) auto,
			var(--brown);
		animation: scroll 8s linear infinite;
	}

	/*============================*/
	/*=====----- SLIDES -----=====*/
	/*============================*/

	.slide,
	.slide-top,
	.img-cont,
	.slide-title {
		position: relative;
	}

	.slide-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.slide-title,
	.slide-top {
		grid-area: 1 / 1 / 1 / 1;
	}

	.slide-title {
		z-index: 5;
		align-self: end;
		padding: 10px;
		margin: 0;
		font-family: var(--font-display);
		font-weight: var(--font-weight-semibold);
		line-height: 1.1;
		letter-spacing: -0.1em;
		color: inherit;
		text-transform: uppercase;
		pointer-events: none;
	}

	.slide-title a {
		pointer-events: all;
	}

	.img-cont::before,
	.slide.small .img-cont::after {
		position: absolute;
		inset: 0;
		display: block;
		content: '';
		pointer-events: none;
	}
	
	.img-cont::before {
		z-index: 3;
		mix-blend-mode: multiply;
	}
	
	.slide-img {
		width: 100%;
	}

	.gif {
		position: absolute;
		inset: 0;
		z-index: 2;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			opacity var(--transition-appendix),
			visibility var(--transition-appendix);
	}

	.animated-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transition: opacity var(--transition-appendix);

		&.loaded {
			opacity: 1;
		}
	}

	/*----- large slide -----*/

	.slide.large {
		grid-column: span 2;

		.slide-title {
			font-size: var(--text-2xl);
			transition: color var(--transition-appendix);
		}

		.slide-title a {
			transition: none;
		}
		
		.img-cont::before {
			background: linear-gradient(180deg, rgba(100, 100, 100, 0.00) 82.35%, #000 100%);
		}
	}

	/*----- small slides -----*/

	.slide.small {
		.slide-title {
			font-size: var(--text-base);
			transition: translate var(--transition-appendix);
		}

		.img-cont::before {
			background:
				linear-gradient(180deg, rgba(0, 0, 0, 0.00) 53.5%, rgba(0, 0, 0, 0.70) 100%),
				linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%);
		}

		.img-cont::after {
			z-index: 4;
			background: url('/includes/public/assets/shared/texture-green-bottom-right.svg') no-repeat right bottom / 100% auto;
			opacity: 0;
			transition: opacity var(--transition-appendix);
		}
	}

	/*===================================*/
	/*=====----- MEDIA QUERIES -----=====*/
	/*===================================*/

	@media (prefers-reduced-motion: reduce) {
		.scrolling-graphic {
			animation: none;
		}

		.gif {
			display: none;
		}
	}

	@media (hover: hover) {
		.slide:has(a:hover) .img-cont::after {
			opacity: 1;
		}

		.slide.large:has(a:hover) .slide-title {
			color: var(--salmon);
		}

		.slide.large:hover .gif {
			opacity: 1;
			visibility: visible;
		}

		.slide.small:has(a:hover) .slide-title {
			translate: 0 calc(50% - 8px);
		}
	}

	@container (min-width: 40em) {
		.widget-inner {
			padding-bottom: 72px;
		}

		.slides {
			gap: var(--space-10) var(--space-5);
		}

		.slide-title {
			translate: 0 50%;
			display: -webkit-box;
			padding: 0;
			-webkit-box-orient: vertical;
			box-orient: vertical;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			overflow: hidden;
		}

		.slide.large {
			.slide-title {
				font-size: 2rem;
			}
		}

		.slide.small {
			.slide-title {
				font-size: var(--text-xl);
			}
		}
	}

	@container (min-width: 64em) {
		.widget-inner {
			--top-padding: 97px;
			--marquee-height: 88px;
		}

		.template-title {
			margin-bottom: var(--space-5);
			font-size: 3.25rem;
		}

		.widget-background {
			height: 451px;

			.square-1 {
				inset: 0 150px 60px;
			}

			.square-2 {
				inset: 27px 206px 35px;
			}

			.square-3 {
				inset: 61px 0 0;
			}
		}

		.slides {
			grid-template: 'slide2 slide3 slide1 slide4 slide5' auto / minmax(0, 1fr) minmax(0, 1fr) 24.78% minmax(0, 1fr) minmax(0, 1fr);
			align-items: start;
			gap: 10px;
		}

		.slide.large {
			grid-column: unset;
		}

		.slide.small {
			margin-top: 72px;
		}

		.slide-1 {
			grid-area: slide1;
		}

		.slide-2 {
			grid-area: slide2;
		}

		.slide-3 {
			grid-area: slide3;
		}

		.slide-4 {
			grid-area: slide4;
		}

		.slide-5 {
			grid-area: slide5;
		}
	}
}

@keyframes scroll {
	from {
		background-position: left center;
	}
	to {
		background-position: calc(var(--scrolling-graphic-width) * -1) center;
	}
}