.tris-scroller {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	--tris-item-gap: 20px;
	--tris-row-2-offset: 260px;
}

.tris-scroller.tris-full-width {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.tris-row {
	width: 100%;
	overflow: hidden;
}

.tris-row-2 .tris-track {
	margin-left: var(--tris-row-2-offset);
}

.tris-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
	animation-duration: var(--tris-duration, 32s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.tris-group {
	display: flex;
	flex-wrap: nowrap;
	flex: 0 0 auto;
}

.tris-item {
	flex: 0 0 auto;
	overflow: hidden;
	position: relative;
	margin-right: var(--tris-item-gap);
}

.tris-item a {
	display: block;
	width: 100%;
	height: 100%;
}

.tris-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tris-direction-left .tris-track {
	animation-name: tris-scroll-left;
}

.tris-direction-right .tris-track {
	animation-name: tris-scroll-right;
}

.tris-pause-hover .tris-row:hover .tris-track {
	animation-play-state: paused;
}

@keyframes tris-scroll-left {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@keyframes tris-scroll-right {
	from {
		transform: translate3d(-50%, 0, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tris-track {
		animation-play-state: paused;
	}
}