.jm-reviews-marquee {
padding-block: var(--space-section-md);
overflow: hidden;
background-color: var(--color-bg-subtle);
}
.jm-reviews-marquee__title {
margin-bottom: clamp(2rem, 4vw, 3.5rem);
color: var(--color-neutral-900);
font-size: var(--fs-h3);
line-height: var(--lh-heading);
text-align: center;
text-transform: uppercase;
letter-spacing: var(--ls-wide);
margin-top:0;
}
.jm-reviews-marquee__viewport {
position: relative;
width: 100%;
overflow: hidden;
mask-image: linear-gradient(
to right,
transparent,
#000 8%,
#000 92%,
transparent
);
}
.jm-reviews-marquee__track {
display: flex;
width: max-content;
animation: jm-reviews-marquee-scroll 55s linear infinite;
}
.jm-reviews-marquee__group {
display: flex;
flex-shrink: 0;
gap: var(--space-4);
padding-inline: var(--space-2);
}
.jm-reviews-marquee__slide {
flex: 0 0 auto;
width: min(20rem, 78vw);
}
.jm-reviews-marquee__slide.jm-review-card {
margin: 0;
padding: 0;
list-style: none;
}
.jm-reviews-marquee__slide .jm-review-card__inner {
height: 100%;
}
.jm-reviews-marquee__slide .jm-review-card__content {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
}
@keyframes jm-reviews-marquee-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.jm-reviews-marquee__track {
animation: none;
flex-wrap: wrap;
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
gap: var(--space-4);
}
.jm-reviews-marquee__group {
display: contents;
}
.jm-reviews-marquee__group[aria-hidden="true"] {
display: none;
}
.jm-reviews-marquee__slide {
width: min(100%, 20rem);
}
}
@media (min-width: 782px) {
.jm-reviews-marquee__slide {
width: 22rem;
}
}