.custom-collection.listicle-grid,
#main-content .custom-collection.listicle-grid {
	position: relative;
	container-type: normal;
	padding: 0;
	margin: 0;
	color: var(--black);

	.header-image {
		position: relative;
		border-left: 20px solid var(--salmon);

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

	.slides {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-5);
		padding: 30px var(--space-5);
		background: var(--brown-tint);
	}

	.template-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-3xl);
		line-height: 1.1;
		letter-spacing: -0.1em;
		color: inherit;
	}

	.slide {
		padding-bottom: var(--space-5);
		border-bottom: 1px solid var(--black);
	}

	.slide-inner {
		display: grid;
		grid-template-columns: 42.86% minmax(0, 1fr);
		gap: 10px;
		align-items: start;
	}

	.slide-top {
		order: -1;
	}

	.img-cont {
		border-radius: 0;
	}

	.slide-img {
		width: 100%;
	}

	.info-flag {
		display: block;
		margin-bottom: 6px;
		font-family: var(--font-display);
		font-weight: var(--font-weight-semibold);
		font-size: 0.625rem;
		line-height: var(--leading-none);
		text-transform: uppercase;
		color: inherit;
	}

	.slide-title {
		margin-bottom: 6px;
		font-family: var(--font-body);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-lg);
		line-height: 1.2;
		color: inherit;
	}

	.slide-title a {
		text-decoration: underline transparent;
	}

	.details {
		margin-bottom: var(--space-2);
		font-size: var(--text-xs);
	}

	.slide-desc {
		margin: 0;
		font-family: var(--font-body);
		font-weight: var(--font-weight-medium);
		font-size: var(--text-sm);
		line-height: 1.4;
		color: inherit;
	}

	@media (hover: hover) {
		.slide-title a:hover {
			text-decoration-color: currentColor;
		}
	}

	@media (min-width: 64em) {
		min-height: 100vh;

		.header-image {
			display: none;
		}

		.slides {
			position: sticky;
			top: 0;
			bottom: 0;
			align-self: start;
			padding: 30px 50px 30px 70px;
			background: none;
		}

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

		.slide-inner {
			grid-template-columns: 31.64% minmax(0, 1fr);
			align-items: center;
			gap: var(--space-5);
		}
		
		.info-flag,
		.slide-title {
			margin-bottom: var(--space-2);
		}

		.info-flag {
			font-size: var(--text-xs);
		}

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

		.details {
			font-size: var(--text-sm);
		}

		.slide-desc {
			font-size: var(--text-base);
			line-height: 1.7;
		}
	}
}