.carousel{--items:1;--carousel-duration:40s;--carousel-item-width:280px;--carousel-item-gap:2rem;--clr-cta:rgb(0,132,209)}@media (min-width:640px){.carousel{--carousel-duration:50s}}.carousel:hover>article{animation-play-state:paused}.carousel[reverse]>article{animation-direction:reverse}.carousel>article{left:calc(100% + var(--carousel-item-gap));animation-name:marquee;animation-duration:var(--carousel-duration);animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform;animation-delay:calc(var(--carousel-duration) / var(--items) * 1 * var(--i) * -1)}@keyframes marquee{to{transform:translateX(calc((var(--items) * (var(--carousel-item-width) + var(--carousel-item-gap))) * -1))}}.carousel[data-mask]{-webkit-mask-image:linear-gradient(90deg,transparent,black 10% 90%,transparent);mask-image:linear-gradient(90deg,transparent,black 10% 90%,transparent)}.carousel a{text-decoration:none;text-transform:lowercase;border:1px solid var(--clr-cta);color:var(--clr-cta);border-radius:3px;padding:.25rem .5rem;place-self:start;transition:.15s ease-in-out}.carousel a:focus-visible,.carousel a:hover{background-color:var(--clr-cta);color:white;outline:none}