.large-slider {
	--position: 1;
	position: relative;
	padding-top: calc(100% / (16 / 9));
}

@media (max-width: 736px) {
	main .large-slider:not(.noexpandmargin) {
		margin-left: -10px;
		margin-right: -10px;
		padding-top: calc((100% + 10px * 2) / (16 / 9));
	}
}

@property --progress {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 0%;
}

.large-slider[data-rotate].rotating {
	animation: var(--rotate) large-slider-progress forwards;
}

@keyframes large-slider-progress {
	0% { --progress: 0%; } 1% { --progress: 1%; }
	2% { --progress: 2%; } 3% { --progress: 3%; }
	4% { --progress: 4%; } 5% { --progress: 5%; }
	6% { --progress: 6%; } 7% { --progress: 7%; }
	8% { --progress: 8%; } 9% { --progress: 9%; }
	10% { --progress: 10%; } 11% { --progress: 11%; }
	12% { --progress: 12%; } 13% { --progress: 13%; }
	14% { --progress: 14%; } 15% { --progress: 15%; }
	16% { --progress: 16%; } 17% { --progress: 17%; }
	18% { --progress: 18%; } 19% { --progress: 19%; }
	20% { --progress: 20%; } 21% { --progress: 21%; }
	22% { --progress: 22%; } 23% { --progress: 23%; }
	24% { --progress: 24%; } 25% { --progress: 25%; }
	26% { --progress: 26%; } 27% { --progress: 27%; }
	28% { --progress: 28%; } 29% { --progress: 29%; }
	30% { --progress: 30%; } 31% { --progress: 31%; }
	32% { --progress: 32%; } 33% { --progress: 33%; }
	34% { --progress: 34%; } 35% { --progress: 35%; }
	36% { --progress: 36%; } 37% { --progress: 37%; }
	38% { --progress: 38%; } 39% { --progress: 39%; }
	40% { --progress: 40%; } 41% { --progress: 41%; }
	42% { --progress: 42%; } 43% { --progress: 43%; }
	44% { --progress: 44%; } 45% { --progress: 45%; }
	46% { --progress: 46%; } 47% { --progress: 47%; }
	48% { --progress: 48%; } 49% { --progress: 49%; }
	50% { --progress: 50%; } 51% { --progress: 51%; }
	52% { --progress: 52%; } 53% { --progress: 53%; }
	54% { --progress: 54%; } 55% { --progress: 55%; }
	56% { --progress: 56%; } 57% { --progress: 57%; }
	58% { --progress: 58%; } 59% { --progress: 59%; }
	60% { --progress: 60%; } 61% { --progress: 61%; }
	62% { --progress: 62%; } 63% { --progress: 63%; }
	64% { --progress: 64%; } 65% { --progress: 65%; }
	66% { --progress: 66%; } 67% { --progress: 67%; }
	68% { --progress: 68%; } 69% { --progress: 69%; }
	70% { --progress: 70%; } 71% { --progress: 71%; }
	72% { --progress: 72%; } 73% { --progress: 73%; }
	74% { --progress: 74%; } 75% { --progress: 75%; }
	76% { --progress: 76%; } 77% { --progress: 77%; }
	78% { --progress: 78%; } 79% { --progress: 79%; }
	80% { --progress: 80%; } 81% { --progress: 81%; }
	82% { --progress: 82%; } 83% { --progress: 83%; }
	84% { --progress: 84%; } 85% { --progress: 85%; }
	86% { --progress: 86%; } 87% { --progress: 87%; }
	88% { --progress: 88%; } 89% { --progress: 89%; }
	90% { --progress: 90%; } 91% { --progress: 91%; }
	92% { --progress: 92%; } 93% { --progress: 93%; }
	94% { --progress: 94%; } 95% { --progress: 95%; }
	96% { --progress: 96%; } 97% { --progress: 97%; }
	98% { --progress: 98%; } 99% { --progress: 99%; }
	100% { --progress: 100%; }
}

.large-slider .items-holder {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.large-slider ul.items {
	position: absolute;
	top: 0;
	width: 100%;
	bottom: 0;
	overflow: hidden;
	touch-action: pan-y;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: black;
	user-select: none;
}

.large-slider ul.items::after {
	content: "";
	position: absolute;
	top: 0;
	width: 100%;
	bottom: 0;
	pointer-events: none;
	box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5) inset;
}

.large-slider ul.items > li {
	width: 100%;
	transform: translateX(calc(-100% * (var(--position) - 1)));
}

.large-slider ul.items:not(.notrans) > li {
	transition: transform 0.5s;
}

.large-slider > header {
	position: absolute;
	top: 0;
	width: 100%;
	pointer-events: none;
}

.large-slider > header > * {
	pointer-events: auto;
}

.large-slider > header .cat {
	margin: 1em 0 0 1.5em;
	font-size: 0.9em;
	font-weight: bold;
}

.large-slider > header .cat.credit {
	font-weight: normal;
	font-style: italic;
	color: rgb(255 255 255 / 50%);
}

.large-slider > header .count {
	margin: 1.4em 1.5em 0 0;
	font-size: 14px;
	position: relative;
	z-index: 0;
}

.large-slider[data-rotate] > header .count::before {
	content: "";
	position: absolute;
	top: calc(50% - 1.5rem);
	right: calc(50% - 1.5rem);
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	z-index: -1;
}

.large-slider[data-rotate].rotating > header .count::before {
	background: conic-gradient(rgba(255, 255, 255, 0.3) var(--progress), transparent var(--progress));
}

.large-slider > footer {
	position: absolute;
	width: 100%;
	height: 30%;
	bottom: 0;
}

@media (min-width: 481px) {
	.large-slider > footer {
		height: 35%;
		max-height: 12em;
	}
}

.large-slider button.rotate {
	display: inline-block;
	line-height: normal;
	margin: 0 0.5em;
	width: 2.4em;
	height: 2.4em;
	border-radius: 8px;
	color: white;
	background-color: rgb(0 0 0 / 75%);
}

@media (min-width: 481px) {
	.large-slider button.rotate {
		margin: 0 2em;
		width: 3.5em;
		height: 3.5em;
	}
}

.large-slider button.rotate i {
	display: inline-block;
	font-size: 2em;
	line-height: 0.7;
	vertical-align: middle;
}

.large-slider > footer .info {
	min-width: 0;
	padding: 1em;
	background-color: rgb(0 0 0 / 75%);
	border-radius: 8px;
}

.large-slider > footer .info .typelabel {
	font-size: 1.3em;
	font-weight: bold;
	line-height: normal;
	padding: 0.1em 0.3em 0;
	margin-right: 0.5em;
	text-transform: uppercase;
	float: left;
	position: relative;
	top: -0.05em;
	overflow: hidden;
	z-index: 0;
}

.large-slider > footer .info .typelabel::before {
	content: "";
	position: absolute;
	top: -0.8em;
	left: 0;
	width: 100%;
	bottom: -0.8em;
	background-color: #d100d8;
	border-radius: 30px;
	z-index: -1;
}

.large-slider > footer .info .typelabel.orange::before {
	background-color: #d73c00;
}

.large-slider > footer .info .typelabel.blue::before {
	background-color: #0057e3;
}

.large-slider > footer .info .typelabel.purple::before {
	background-color: #6a00a6;
}

.large-slider > footer .info h3 {
	margin: 0;
	font-size: 1.2em;
	line-height: 1.1;
	max-height: 2.1em;
	overflow: hidden;
}

@media (min-width: 481px) {
	.large-slider > footer .info h3 {
		font-size: 1.5em;
		max-height: 2.2em;
	}

	.large-slider > footer .info h3.solo {
		font-size: 2em;
	}
}
.large-slider > footer .info p {
	margin: 0;
	font-size: 1.1em;
	max-height: 2.6em;
	line-height: 1.3em;
	overflow: hidden;
	color: #888;
}

@media (max-width: 480px) {
	.large-slider > footer .info p {
		display: none;
	}
}

@media (min-width: 737px) {
	.large-slider > footer .info p {
		max-height: 2.6em;
		font-size: 1.2em;
		margin-top: 0.3em;
	}
}