.marquee > .marquee-scroll {
  --gap: 1rem;
  overflow: hidden;
  padding: 1rem 0;
  white-space: nowrap;
  display: flex;
  flex-shrink:0;
  min-width: 100%;
  position: relative;
  justify-content: space-between;
  mask-image: linear-gradient(90deg, transparent, #fff 10%, #fff 90%, transparent);
  gap: var(--gap);
  > .marquee-content {
    display: flex;
    column-gap: var(--gap);
  }
}
.marquee.active, .marquee [data-animate="true"], .marquee [data-animate="1"] {
  .marquee-content { animation: marquee 50s linear 3; animation-iteration-count: infinite; }
}
/* uncomment the following to enable pause on hover */
/*
.marquee.active:hover, .marquee [data-animate="true"]:hover, .marquee [data-animate="1"]:hover {
  .marquee-content { animation-play-state: paused; }
}
*/
@keyframes marquee {
  from {
    transform: translateX(0);
  }
 	to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}
.marquee .card {
  min-width:380px;
  .card-header {
    color: white;
    border: unset;
    background: var(--bs-gray-700);
    padding-top: 1rem;
    padding-bottom: 0.875rem;
    * { color: inherit; font-style: unset; margin: 0; }
    .card-title { font-weight: var(--font-weight-heavy); margin-bottom: 4px; }
    .caption { font-weight: var(--font-weight-light); font-size: 0.875rem;}
  }
  .card-body {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    .content .big { font-size: 2em; font-weight: var(--font-weight-black) }
    .foot {
      display: flex;
      column-gap: 1rem;
      color: var(--bs-gray-600);
      font-size: .75em;
      text-transform: uppercase;
      .badge {
        background: lightgray;
        color:var(--corp-blue);
        line-height: 1.5em;
        min-width: 8em;
      }
    }
  }
}
.marquee .card.series-a > .card-header { background: var(--bs-blue)}
.marquee .card.series-b > .card-header { background: var(--bs-black)}
.marquee .card.series-c > .card-header { background: var(--corp-blue)}
.marquee .card.series-d > .card-header { background: #6A7282; }

@media(max-width: 991px) {
	.marquee .card { min-width:300px; }
}