<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.spotlight {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	&amp; ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	&amp; h2, &amp; p {
		text-align: center;
	}
	&amp; h3 {
		margin-block-start: 0;
		text-align: center;
	}
	&amp; h3 {
		font-size: 2.5em;
	}
	&amp; .splide__arrow {
		top: 22vw;
		z-index: 2;
	}
}

.spotlight__slide {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.spotlight__controls {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5em;
	margin-block-end: 2em;
  &amp; button {
    font-weight: 700;
    text-transform: uppercase;
		text-align: center;
    letter-spacing: 0.12em;
		background: none;
		appearance: none;
		-webkit-appearance: none;
		padding: 0;
		opacity: 0.5;
		border: none;
		border-bottom: 2px solid transparent;
		padding-block: 0.2em;
		display: inline-block;
		color: var(--color-text);
		font-family: inherit;
  }
	&amp; button.is-active {
		border-bottom: 3px solid var(--color-primary-bright);
		opacity: 1;
	}
}

.spotlight__content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

@media (min-width: 768px) {
	.spotlight {
		flex-direction: column;
		&amp; .splide__arrow {
			top: calc(40% - 20px);
		}
		&amp; h3 {
			font-size: 3.5em;
		}
		&amp; h2, &amp; p {
			text-align: left;
		}
	}
	.spotlight__content {
		align-items: flex-start;
		padding-inline-end: 1em; /* clear arrow */
	}
	.spotlight__slide {
		display: grid;
		grid-template-columns: 0.82fr 1fr;
		gap: 6vw;
		padding-inline-end: 1em;
	}
	.spotlight__controls {
		margin-block: 2em;
		flex-direction: row;
		justify-content: center;
		gap: 2em;
	}
}

.spotlight__image {
	aspect-ratio: 4/3;
	&amp; img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}</pre></body></html>