```css
/**
 * SHU 10 Footwear
 * Infinite Logo / Content Ticker
 */


/* ---------------------------------------------------------
   Main ticker
   --------------------------------------------------------- */

.shu10-ticker {
	--shu10-ticker-gap: 60px;
	--shu10-ticker-padding: 22px;

	width: 100%;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
}


/* ---------------------------------------------------------
   Background variations
   --------------------------------------------------------- */

.shu10-ticker--contrast {
	background: var(--wp--preset--color--primary);
	color: #ffffff;
}

.shu10-ticker--primary {
	background: #9b4b32;
	color: #ffffff;
}

.shu10-ticker--sand {
	background: #f4eee5;
	color: #111111;
}


/* ---------------------------------------------------------
   Viewport
   --------------------------------------------------------- */

.shu10-ticker__viewport {
	width: 100%;
	overflow: hidden;
	padding: 1.25rem 0rem;
}


/* ---------------------------------------------------------
   Track
   --------------------------------------------------------- */

.shu10-ticker__track {
	display: flex;
	width: max-content;
	flex-wrap: nowrap;
	gap: 2rem;
	animation-name: shu10TickerLeft;
	animation-duration: var(--shu10-ticker-duration, 25s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;

	will-change: transform;
}


/* ---------------------------------------------------------
   Right direction
   --------------------------------------------------------- */

.shu10-ticker--right .shu10-ticker__track {
	animation-name: shu10TickerRight;
}


/* ---------------------------------------------------------
   Individual groups
   --------------------------------------------------------- */

.shu10-ticker__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	flex-wrap: nowrap;
	gap: 2rem;
}
.shu10-ticker__group br{
	display: none;
}


/* ---------------------------------------------------------
   EVERY LOGO / CONTENT ITEM
   Gets its own DIV
   --------------------------------------------------------- */

.shu10-ticker__item {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	/* min-height: 50px; */

	padding: var(--shu10-ticker-padding) 0;

	margin-right: var(--shu10-ticker-gap);

	box-sizing: border-box;

	white-space: nowrap;
}


/* ---------------------------------------------------------
   Logo link
   --------------------------------------------------------- */

.shu10-ticker__link {
	display: flex;
	align-items: center;
	justify-content: center;

	text-decoration: none;

	color: inherit;

	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}


/* ---------------------------------------------------------
   Logo
   --------------------------------------------------------- */

.shu10-ticker__logo {
	display: block;

	width: auto;
	max-width: 180px;
	height: 45px;

	object-fit: contain;

	border: 0;

	margin: 0;
	padding: 0;

	transition:
		transform 0.25s ease,
		opacity 0.25s ease;
}


/* ---------------------------------------------------------
   Logo hover
   --------------------------------------------------------- */

.shu10-ticker__link:hover {
	opacity: 0.8;
}

.shu10-ticker__link:hover .shu10-ticker__logo {
	transform: scale(1.04);
}


/* ---------------------------------------------------------
   Text
   --------------------------------------------------------- */

.shu10-ticker__text {
	display: inline-block;

	font-style: italic;
    font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: 0.04em;

	white-space: nowrap;
}


/* ---------------------------------------------------------
   Separator
   --------------------------------------------------------- */

/* .shu10-ticker__item::after {
	content: "•";

	display: inline-block;

	margin-left: var(--shu10-ticker-gap);

	font-size: 20px;

	opacity: 0.55;
} */


/* Remove separator from final item in each group */

.shu10-ticker__group
.shu10-ticker__item:last-child::after {
	display: none;
}


/* ---------------------------------------------------------
   LEFT ANIMATION
   --------------------------------------------------------- */

@keyframes shu10TickerLeft {

	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}

}


/* ---------------------------------------------------------
   RIGHT ANIMATION
   --------------------------------------------------------- */

@keyframes shu10TickerRight {

	from {
		transform: translateX(-50%);
	}

	to {
		transform: translateX(0);
	}

}


/* ---------------------------------------------------------
   Pause when mouse is over ticker
   --------------------------------------------------------- */

.shu10-ticker:hover .shu10-ticker__track {
	animation-play-state: paused;
}


/* ---------------------------------------------------------
   Accessibility
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.shu10-ticker__track {
		animation: none;
		transform: none;
	}

}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 768px) {

	.shu10-ticker {
		--shu10-ticker-gap: 40px;
		--shu10-ticker-padding: 16px;
	}


	.shu10-ticker__item {
		min-height: 45px;
	}


	.shu10-ticker__logo {
		max-width: 140px;
		height: 38px;
	}


	.shu10-ticker__text {
		font-size: 14px;
	}

}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 480px) {

	.shu10-ticker {
		--shu10-ticker-gap: 28px;
		--shu10-ticker-padding: 13px;
	}


	.shu10-ticker__item {
		min-height: 40px;
	}


	.shu10-ticker__logo {
		max-width: 110px;
		height: 32px;
	}


	.shu10-ticker__text {
		font-size: 13px;
	}


	.shu10-ticker__item::after {
		margin-left: var(--shu10-ticker-gap);
		font-size: 16px;
	}

}
```