.custom-listicle-container {
	position: relative;
	margin-bottom: var(--widget-margin-bottom);

	.listicle-header {
		position: absolute;
		inset: 31px 83px auto 0;
		z-index: 4;
		max-width: calc(31.25ch + 50px);
		padding: 23px 26px 44px 17px;
		background: var(--brown);

		&::before {
			position: absolute;
			inset: auto 133px 18px 0;
			height: 9px;
			display: block;
			content: '';
			background: url('/includes/public/assets/shared/listicle-title-underline-graphic.svg') repeat-x right center / auto 100%;
			pointer-events: none;
		}
	}

	.listicle-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-4xl);
		line-height: 1.1;
		letter-spacing: -0.1em;
		text-transform: uppercase;
		color: var(--white);
	}

	.badge {
		position: absolute;
		inset: auto -28px -30px auto;
		width: 108px;
		pointer-events: none;
	}

	.spinning-text {
		transform-origin: center center;
		transform-box: content-box;
		animation: rotate 20s linear infinite;
	}

	.desktop-images {
		position: relative;
		display: none;
		border-left: 50px solid var(--salmon);

		&::before {
			position: absolute;
			inset: 0;
			display: block;
			z-index: 3;
			content: '';
			background: linear-gradient(327deg, rgba(0, 0, 0, 0.00) 64.11%, rgba(0, 0, 0, 0.50) 100%);
			pointer-events: none;
		}

		.header-image,
		.slide-img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.header-image {
			position: relative;
			z-index: 2;
			opacity: 0;
			visibility: hidden;
			transition:
				opacity var(--transition-long),
				visibility var(--transition-long);
		}

		.header-image + .header-image {
			position: absolute;
			inset: 0;
			z-index: 1;
		}

		.header-image.active {
			opacity: 1;
			visibility: visible;
		}
	}

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

	@media (min-width: 64em) {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		background: var(--brown-tint);

		.listicle-header,
		.lists {
			grid-area: 1 / 1 / 1 / 1;
		}

		.listicle-header {
			position: sticky;
			inset: 30px auto 30px 0;
			padding: var(--space-4) 30px var(--space-10) var(--space-5);
			margin: 30px 0 var(--space-10);

			&::before {
				right: 152px;
				bottom: var(--space-4);
				height: 10px;
			}
		}

		.listicle-title {
			font-size: 3.25rem;
		}

		.badge {
			right: -33px;
			bottom: -35px;
			width: 7.8125rem;
		}

		.lists {
			display: grid;
			grid-template-columns: 41.32% minmax(0, 1fr);
			align-items: start;
		}

		.desktop-images {
			position: sticky;
			top: 0;
			display: block;
			height: 100vh;
		}
	}
}

@keyframes rotate {
	from {
		rotate: 0deg;
	}
	to {
		rotate: 360deg;
	}
}