.quote-marquee {
  background: var(--white);
  overflow: hidden;
}

.quote-marquee-title {
  text-align: center;
  margin: 0 0 40px;
}

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

.quote-marquee-track-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.quote-marquee-track {
  display: flex;
  padding: 8px 0;
  will-change: transform;
  touch-action: pan-y pinch-zoom;
}

/* ---- Cards ---- */

.test-card {
  flex: 0 0 auto;
  width: 280px;
  min-height: 240px;
  margin-right: 24px;
  border-radius: 12px;
  padding: 30px 24px 26px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Colour variants */
.test-card--light-blue {
  background: var(--pastel-blue);
  color: var(--blue);
}
.test-card--rose {
  background: var(--orange);
  color: var(--light-grey);
}
.test-card--navy {
  background: var(--blue);
  color: var(--light-grey);
}
.test-card--off-white {
  background: var(--light-grey);
  color: var(--blue);
}
.test-card--red {
  background: var(--red);
  color: var(--light-grey);
}

.test-card-quote-mark {
  color: currentColor;
  opacity: 0.15;
}
.test-card-quote-mark--open {
  top: 27px;
  left: -10px;
}
.test-card-quote-mark--close {
  right: -10px;
  bottom: -138px;
}

.test-card-text {
  position: relative;
  z-index: 1;
  font-weight: 600;
  font-size: 1.05em;
  line-height: 1.25;
  margin: 0;
  color: inherit;
}

.test-card-cite {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  font-style: italic;
  font-size: 0.85em;
  line-height: 1.4;
  color: inherit;
  opacity: 0.95;
}

@media (prefers-reduced-motion: reduce) {
  .quote-marquee-track-wrap {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---- Breakpoints ---- */

@media screen and (min-width: 50em) {
  .quote-marquee-title {
    margin-bottom: 50px;
  }

  .test-card {
    width: 360px;
    min-height: 280px;
    padding: 36px 36px 32px;
    border-radius: 14px;
  }

  .test-card-quote-mark--open {
    top: 29px;
    left: -14px;
  }
  .test-card-quote-mark--close {
    bottom: -170px;
    right: -16px;
  }

  .test-card-text {
    font-size: 1.25em;
    line-height: 1.2;
  }
  .test-card-cite {
    font-size: 0.9em;
    margin-top: 24px;
  }
}

@media screen and (min-width: 64em) {
  .test-card {
    width: 400px;
  }
  .test-card-text {
    font-size: 1.35em;
  }
}