/* Home clients: two rows of hanging banners that slide sideways (Figma 64:3742, components 64:3741 / 64:3743).
   Row a starts at Default and slides to Variant2; row b starts at Variant2 and slides back. Each cycle: 0.8s hold,
   3s ease-out move, 0.8s hold, 3s ease-out move back. The row translate is 1260px (Figma x -1236 -> 24). */

.ramah-home-clients__rows { display: grid; row-gap: 20px; padding-block-start: 14px; overflow-x: clip; direction: ltr; }
.ramah-home-clients__row { display: flex; align-items: flex-start; gap: 36px; inline-size: max-content; margin: 0; padding: 0 24px; list-style: none; }
.ramah-home-clients__row--a { translate: -1260px 0; animation: ramah-clients-a 7.6s infinite; }
.ramah-home-clients__row--b { translate: 0 0; animation: ramah-clients-b 7.6s infinite; }
.ramah-home-clients__rows:hover .ramah-home-clients__row { animation-play-state: paused; }

/* Banner: 144 x 217 box; the ring and body hang 14px above it, so each item is 231 tall starting at -14px. */
.ramah-home-clients__item { position: relative; flex: none; inline-size: 144px; block-size: 231px; margin-block-start: -14px; }
.ramah-home-clients__banner { position: absolute; inset: 0; display: block; }
.ramah-home-clients__banner::before { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 0; inline-size: 3px; block-size: 14px; translate: -50% 0; background: #262626; }
.ramah-home-clients__rod { position: absolute; inset-inline: 0; inset-block-start: 14px; block-size: 9px; border-radius: 2px; background: #171717; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
.ramah-home-clients__body {
	position: absolute; inset-inline-start: 8px; inset-block-start: 23px; inline-size: 128px; block-size: 208px;
	display: flex; flex-direction: column; align-items: center; padding: 26px 10px 46px;
	background: #171717; isolation: isolate;
	-webkit-mask: url("../../images/home/cards/shield-mask.svg") center / 100% 100% no-repeat; mask: url("../../images/home/cards/shield-mask.svg") center / 100% 100% no-repeat;
}
.ramah-home-clients__body::before { content: ""; position: absolute; inset: 2px; z-index: -1; background: #f3f0ea; }
.ramah-home-clients__mark { display: flex; align-items: center; justify-content: center; inline-size: 100%; block-size: 116px; flex: none; }
.ramah-home-clients__mark img { display: block; }
.ramah-home-clients__name { position: static; inline-size: 100%; overflow: hidden; font-size: 14px; line-height: 20px; font-weight: 700; color: #262626; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.ramah-home-clients__item.is-featured .ramah-home-clients__body::before { background: #941b21; }
.ramah-home-clients__item.is-featured .ramah-home-clients__name { color: #fff; }

@keyframes ramah-clients-a {
	0%, 10.53% { translate: -1260px 0; animation-timing-function: ease-out; }
	50%, 60.53% { translate: 0 0; animation-timing-function: ease-out; }
	100% { translate: -1260px 0; }
}
@keyframes ramah-clients-b {
	0%, 10.53% { translate: 0 0; animation-timing-function: ease-out; }
	50%, 60.53% { translate: -1260px 0; animation-timing-function: ease-out; }
	100% { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.ramah-home-clients__row { animation: none; translate: -1260px 0; }
}