input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
	font-family: 'Inter Tight', sans-serif;
	scroll-behavior: smooth;
}

:root {
	--no-of-slides: 4;
	--slides-in-view: 5;
	--slide-width: 500px;
	--slide-height: 500px;
	--iteration-time: 22s;
}

.carousel__wrapper {
	display: flex;
	/*justify-content: center;*/
	align-items: center;

	width: calc(var(--slides-in-view) * var(--slide-width));
	overflow: hidden;
}

.carousel {
	overflow: hidden;
	width: calc(2 * var(--no-of-slides));
}
.carousel > img {
	border: 2px solid black;
}

.carousel__slide {
	display: flex;
	flex-direction: column;

	flex: 0 0 auto;
	width: var(--slide-width);
	height: var(--slide-height);
	box-sizing: border-box;
	/*border: 1px dotted darkblue;*/
}