.highlights {
	--sw-icon-color: var(--yellow);

	position: relative;
	color: var(--gray-dark);

	.slides {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 22px;
	}

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

	.slide > .inner {
		display: grid;
	}

	.slide-img {
		width: 100%;
	}

	.content-section {
		order: 1;
	}

	.content-upper {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 10px;
	}

	.info-flag,
	.sponsored {
		margin-bottom: 10px;
		font-size: 0.8125rem;
	}

	.slide-title {
		margin: 0;
		font-family: var(--font-soft);
		font-weight: var(--font-weight-bold);
		line-height: 1.2;
		color: inherit;
	}

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

		a {
			text-decoration: none;
			color: inherit;
		}
	}

	.slide-desc {
		margin: 5px 0 0;
		font-family: var(--font-soft);
		font-weight: var(--font-weight-medium);
		font-size: var(--text-base);
		line-height: var(--leading-normal);
		color: inherit;
	}

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

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

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

	/*----- small slide -----*/

	.slide.small {
		+ .slide-small {
			margin-top: 5px;
		}

		> .inner {
			grid-template-columns: 35.82% minmax(0, 1fr);
			align-items: center;
			gap: var(--space-5);
		}

		.mini-date-section {
			--month-size: var(--text-sm);
			--day-size: var(--text-4xl);

			padding: var(--space-2);
		}

		.slide-title {
			font-size: 1.0625rem;
		}
	}

	/*----- media queries -----*/

	@media (min-width: 40em) {
		.slides {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

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

		.slide.small > .inner {
			grid-template-columns: minmax(0, 1fr);
			align-items: start;
		}
	}

	@media (min-width: 64em) {
		display: contents;

		.slides {
			display: contents;
		}

		.slide.large,
		.slide.small {
			> .inner {
				gap: var(--space-5);
			}
		}

		.info-flag,
		.sponsored {
			font-size: var(--text-sm);
		}

		.details {
			font-size: 0.9375rem;
		}

		.slide-desc {
			margin-top: 10px;
			font-size: var(--text-lg);
		}

		.slide.large {
			grid-area: slide1;

			.slide-title {
				font-size: 1.75rem;
			}
		}

		.slide.small {
			&:nth-child(2) {
				grid-area: slide2;
			}

			&:last-child {
				grid-area: slide3;
				margin-top: 10px;
			}

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

@media (min-width: 64em) {
	.contentRender_name_plugins_collections_template_custom_highlights {
		display: contents;
	}
}