.sq-block--highlighted-list {
	padding: 0;
}

.sq-highlighted-list__layout {
	color: var(--text-color);
	height: 100%;
}

.sq-highlighted-list__content {
	display: flex;
	flex-direction: column;
}

.sq-highlighted-list__image-column {
	display: none;
}

.sq-highlighted-list__body {
	padding: 3.2rem 0 4.8rem;
	flex: 1;
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-rows: min-content;
	gap: 2.4rem;
}

.sq-highlighted-list__title {
	color: var(--text-color--accent);
	margin: 0;
}

.sq-highlighted-list__list {
	counter-reset: highlighted-list;
	margin: 0;
	padding-left: 3rem;
}

.sq-highlighted-list__item {
	color: var(--item--default, var(--color-grey--4));
	transition: color .75s cubic-bezier(.585, .1, .535, 1);
}

.sq-highlighted-list__item.is-active {
	color: var(--item--active, var(--color-turquoise--2));
}

.sq-highlighted-list__item.is-active + .sq-highlighted-list__item {
	color: var(--item--next, var(--color-grey--3));
}

.sq-highlighted-list__item.is-active + .sq-highlighted-list__item + .sq-highlighted-list__item,
.sq-highlighted-list__item.is-active + .sq-highlighted-list__item + .sq-highlighted-list__item + .sq-highlighted-list__item {
	color: var(--item--almost, var(--color-grey--2));
}

.sq-highlighted-list__parallax-image {
	position: absolute;
	width: 100%;
	top: 0;
	bottom: 0;
	overflow: hidden;
	border-radius: 7.2rem 0 0 0;
}

.sq-highlighted-list__media {
	position: absolute;
	width: 100%;
	height: 100%;
}

.sq-highlighted-list__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media only screen and (min-width: 1000px) {
	.sq-block--highlighted-list {
		height: var(--window-height);
		min-width: var(--window-width);
		padding: var(--header-height) 0;
	}

	.sq-highlighted-list__layout {
		display: grid;
		grid-template-columns: 3fr 1fr;
		gap: var(--gutter);
	}

	.sq-highlighted-list__image-column {
		display: block;
		position: relative;
	}

	.sq-highlighted-list__body {
		padding: 4.8rem 0;
		grid-template-columns: repeat(9, 1fr);
		gap: 0 var(--gutter);
	}

	.sq-highlighted-list__title-container {
		grid-column: 1 / 7;
		margin-bottom: 14.4rem;
	}

	/* Origineel .list houdt op elke breedte padding-left: 3em aan. */
	.sq-highlighted-list__list {
		grid-row-start: 2;
		grid-column: 1 / 9;
	}
}