:root {
	--lws-marquee-002-size: clamp(10rem, 1rem + 40vmin, 30rem);
	--lws-marquee-002-gap: calc(var(--lws-marquee-002-size) / 14);
	--lws-marquee-002-scroll-start: 0;
	--lws-marquee-002-scroll-end: calc(-100% - var(--lws-marquee-002-gap));
}

.lws-marquee-002-two-rows-container {
	display: flex;
	flex-direction: column;
	gap: var(--lws-marquee-002-gap);
	margin: auto;
	max-width: 100vw;
	position: relative;
	padding: 52px 0px;
}

.lws-marquee-002--wrapper-vertical {
	flex-direction: row;
	height: 100vh;
}

.lws-marquee-002-two-rows-container .lws-marquee-002-scroller {
	display: flex;
	gap: var(--lws-marquee-002-gap);
	mask-image: linear-gradient(
		var(--mask-direction, to right),
		hsl(0 0% 0% / 0),
		hsl(0 0% 0% / 1) 20%,
		hsl(0 0% 0% / 1) 80%,
		hsl(0 0% 0% / 0)
	);
	user-select: none;
	overflow: hidden;
}
  
.lws-marquee-002-two-rows-container .lws-marquee-002-scroller-group {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-shrink: 0;
	gap: var(--lws-marquee-002-gap);
	min-width: 100%;
	animation: scroll-x 60s linear infinite;
}
  
@media (prefers-reduced-motion: reduce) {
	.lws-marquee-002-two-rows-container .lws-marquee-002-scroller-group {
		animation-play-state: paused;
	}
}
  
.lws-marquee-002--marquee-vertical {
	--mask-direction: to bottom;
}
  
.lws-marquee-002--marquee-vertical,
.lws-marquee-002--marquee-vertical .lws-marquee-002-scroller-group {
	flex-direction: column;
	margin: 0px auto;
}
  
.lws-marquee-002--marquee-vertical .lws-marquee-002-scroller-group {
	animation-name: scroll-y;
}
  
.lws-marquee-002-two-rows-container .lws-marquee-002-scroller-reverse .lws-marquee-002-scroller-group {
	animation-direction: reverse;
	animation-delay: -3s;
}
  
  
/* Element styles */
.lws-marquee-002-two-rows-container .lws-marquee-002-scroller svg {
	display: grid;
	place-items: center;
	padding: calc(var(--lws-marquee-002-size) / 10);
	width: var(--lws-marquee-002-size);
	fill: #e1ecf8;
	background: #212b4a;
	border-radius: 0.5rem;
	aspect-ratio: 16/9;
}

.lws-marquee-002--marquee-vertical svg {
	width: calc(var(--lws-marquee-002-size) / 1.5);
	padding: calc(var(--lws-marquee-002-size) / 6);
	aspect-ratio: 1;
}

/* Toggle direction button */
.lws-marquee-002-two-rows-container .lws-marquee-002-toggle {
	z-index: 1;
	position: absolute;
	width: 80px;
	height: 80px;
	top: 1rem;
	left: 1rem;
	color: inherit;
	font: inherit;
	text-align: center;
	background-color: #212b4a;
	border: none;
	border-radius: 50%;
	outline: none;
	cursor: pointer;
}

.lws-marquee-002-two-rows-container .lws-marquee-002-toggle:focus-visible {
	box-shadow: 0 0 0 2px #212b4a;
}

.lws-marquee-002-two-rows-container .lws-marquee-002-toggle span {
	position: absolute;
	display: inline-block;
	width: fit-content;
	top: 50%;
	left: calc(100% + 0.4em);
	white-space: nowrap;
	transform: translateY(-50%);
	animation: fade 400ms 4s ease-out forwards;
	user-select: none;
}

.lws-marquee-002-two-rows-container .lws-marquee-002-toggle svg {
	position: absolute;
	width: 3em;
	height: 3em;
	top: 50%;
	left: 50%;
	fill: #ec1c24;
	transform: translate(-50%, -50%);
	transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
}
  
.lws-marquee-002--toggle-vertical svg {
	transform: translate(-50%, -50%) rotate(-90deg);
}
  
  
@keyframes scroll-x {
	from {
		transform: translateX(var(--lws-marquee-002-scroll-start));
		-webkit-transform: translateX(var(--lws-marquee-002-scroll-start));
		-moz-transform: translateX(var(--lws-marquee-002-scroll-start));
		-ms-transform: translateX(var(--lws-marquee-002-scroll-start));
		-o-transform: translateX(var(--lws-marquee-002-scroll-start));
}
	to {
		transform: translateX(var(--lws-marquee-002-scroll-end));
		-webkit-transform: translateX(var(--lws-marquee-002-scroll-end));
		-moz-transform: translateX(var(--lws-marquee-002-scroll-end));
		-ms-transform: translateX(var(--lws-marquee-002-scroll-end));
		-o-transform: translateX(var(--lws-marquee-002-scroll-end));
}
}
  
@keyframes scroll-y {
	from {
			transform: translateY(var(--lws-marquee-002-scroll-start));
			-webkit-transform: translateY(var(--lws-marquee-002-scroll-start));
			-moz-transform: translateY(var(--lws-marquee-002-scroll-start));
			-ms-transform: translateY(var(--lws-marquee-002-scroll-start));
			-o-transform: translateY(var(--lws-marquee-002-scroll-start));
}
	to {
		transform: translateY(var(--lws-marquee-002-scroll-end));
		-webkit-transform: translateY(var(--lws-marquee-002-scroll-end));
		-moz-transform: translateY(var(--lws-marquee-002-scroll-end));
		-ms-transform: translateY(var(--lws-marquee-002-scroll-end));
		-o-transform: translateY(var(--lws-marquee-002-scroll-end));
}
}

@keyframes fade {
	to {
		opacity: 0;
			visibility: hidden;
	}
}
