.carousel {
	overflow: hidden;
	user-select: none;
	height: calc(100% - var(--title-height) - var(--carousel-scroll-space));
	position: relative;
	cursor: grab;

	/* Add scrollbar */
	overflow-x: auto;
}

.carousel:active {
	cursor: grabbing;
}

.carousel__container {
	position: absolute;
	display: grid;
	grid-auto-flow: column;
	grid-gap: var(--gap);
	height: 100%;
}

.carousel__tile {
	width: 550px;
	aspect-ratio: 16 / 9;
	display: block;
	background-color: var(--primary);
}

.project-wrapper .carousel__tile.blank-space,
.carousel__tile.blank-space {
	width: var(--blank-space-width);
	visibility: hidden;
}

/*    Scrollbar    *\
\* *************** */

@media (min-width: 1024px) {
	*::-webkit-scrollbar {
		height: 15px;
	}

	*::-webkit-scrollbar-track {
		background-color: var(--white);
		border-radius: 8px;
	}

	*::-webkit-scrollbar-thumb {
		background-color: var(--black);
		border-radius: 8px;
		background-clip: padding-box;
		border: 2px solid rgba(255, 255, 255, 0);
	}

	*::-webkit-scrollbar-thumb:hover {
		background-color: var(--primary);
		cursor: grab;
	}

	*::-webkit-scrollbar-thumb:active {
		cursor: grabbing;
	}

	*::-webkit-scrollbar-button:single-button:horizontal {
		width: calc(var(--blank-space-width) + var(--gap));
	}
}

body::-webkit-scrollbar-track {
	border-radius: 0;
}

@media (max-width: 768px) {
	.carousel__tile {
		width: 400px;
	}

	*::-webkit-scrollbar-track {
		border-radius: 0;
	}

	*::-webkit-scrollbar-thumb {
		border-radius: 0;
	}
}