.marquee {
	overflow: hidden;
	align-content:center;

	&:hover .marquee_content {
		animation-play-state: paused;
	}
}

.marquee > .marquee_content {
	display:inline-block;
	white-space:nowrap;
	align-content:center;
	animation:20s infinite linear marquee_scroll;
	height:max-content;

	min-width:max-content;

	& > * {
		display:inline-block;
		text-align:left;

		margin:0;
		padding:0 var(--containerwidth) 0 0;

		&:last-child {
			padding:0;
		}
	}
}

.marquee.--vertical .marquee_content {
	width:100%;
	white-space:normal;
	animation: 10s infinite linear marquee_vertical reverse;

	& > * {
		display: block;
		text-align:center;
		padding: 0 0 var(--containerheight) 0;
		margin:0;
		
		&:last-child {
			padding:0;
		}
	}
}

@keyframes marquee_scroll {
	0% {
		transform: translate(var(--containerwidth), 0px);
	}

	100% {
		transform: translate(-100%, 0px);
	}
}

@keyframes marquee_vertical {
	0% {
		transform: translate(0px, -100%);
	}

	100% {
		transform: translate(0px, var(--containerheight));
	}
}