/*-- -------------------------- -->
<---            Quote            -->
<--- -------------------------- -*/

/* Full-bleed teal band with a soft wavy top/bottom edge (CSS clip-path,
   no image asset), a single centred pull-quote and attribution -- the
   site's belief-statement pattern again, this time on the brand teal. */
@media only screen and (min-width: 0rem) {
  #quote {
    width: 100%;
    background-color: var(--primary);
    padding: clamp(6rem, 12vw, 9rem) 1.5rem;
    text-align: center;
  }
  #quote .cs-container {
    width: 100%;
    max-width: 50rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #quote .cs-quote {
    font-family: var(--headingFont);
    font-weight: 400;
    font-size: clamp(1.375rem, 3.2vw, 2rem);
    line-height: 1.5em;
    margin: 0 0 1.5rem;
    color: var(--cream);
  }
  #quote .cs-attribution {
    font-family: var(--bodyFont);
    font-size: 1rem;
    letter-spacing: 0.02em;
    margin: 0;
    color: var(--cream);
    opacity: 0.8;
  }
}

/* Desktop - 64rem: a touch more breathing room */
@media only screen and (min-width: 64rem) {
  #quote {
    padding: clamp(8rem, 10vw, 10rem) 1.5rem;
  }
}