.post-slider {
	color: var(--white);
	user-select: none;
	overflow-x: hidden;

	@media (width > 768px) {
		padding: var(--spacing-60) 0;
	}

	@media (width > 1200px) {
		padding: var(--spacing-100) 0;
	}
}

.post-slider__wrapper {
	max-width: 1200px;
	margin: 0 auto var(--wp--preset--spacing--60);
	padding: 0 var(--wp--preset--spacing--40);
}

.post-slider__header {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--spacing-10);
	align-items: center;
	padding-inline: var(--spacing-20);

	@media (width > 768px) {
		gap: 0;
		padding-block: var(--spacing-20);
	}
}

.post-slider__terms {
	grid-column: span 2;

	@media (width > 768px) {
		margin-block-end: var(--spacing-80);
	}
}

.post-slider__title {
	margin: 0;
	font-size: var(--step-5);
}

.post-slider__subtitle {
	font-size: var(--step-0);
	line-height: 1.6;
	color: var(--fog);
	margin: 0;
	grid-row: 3;
	grid-column: span 2;
}

.post-slider__controls {
	display: flex;
	gap: var(--spacing-10);
	flex-shrink: 0;

	@media (width > 768px) {
		width: 100%;
		justify-content: flex-start;
		gap: var(--spacing-20);
	}
}

.post-slider__arrow {
	--button-size: 25px;
	--icon-size: 14px;

	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--button-size);
	height: var(--button-size);
	background: var(--fog);
	border-radius: 50%;
	cursor: pointer;
	transition: all 200ms ease-in-out;
	padding: 0;

	@media (width > 768px) {
		--button-size: 48px;
		--icon-size: 18px;
	}

	&:hover,
	&:focus-visible {
		/* TODO: make it like this: https://vcass.vic.edu.au/about */
		background-color: var(--gray-line);
	}

	svg {
		width: var(--icon-size);
		height: var(--icon-size);
	}

	path {
		fill: var(--gray-carbon);
	}
}

.post-slider__arrow--prev {
	svg {
		transform: rotate(180deg);
	}
}

.post-slider__track {
	overflow: hidden;
	-webkit-user-drag: none;
}

.post-slider__slides {
	position: relative;
	width: 100%;
	list-style: none;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	touch-action: pan-Y;
	overflow: hidden;
	padding: 0;
	white-space: nowrap;
	display: flex;
	flex-wrap: nowrap;
	will-change: transform;
}

.post-slider__slide {
	width: 100%;
	height: 100%;
	flex-shrink: 0;
	white-space: normal;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

.post-slider--swipeable {
	cursor: grab;
}

.post-slider--dragging {
	cursor: grabbing;
}