@layer blocks {
  .testimonial[data-variant="strip"] {
    border-left: 3px solid var(--color-accent-strong);
    padding-left: var(--space-s);
  }

  .testimonial[data-variant="card"] {
    background: var(--color-bg);
    border: var(--border-width) var(--border-style) var(--color-border-light);
    border-radius: var(--radius-l);
    padding: var(--space-m);
  }

  .testimonial[data-variant="card"] blockquote::before {
    content: "\201C";
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--color-accent-tint);
    line-height: 0;
    vertical-align: -0.75rem;
    margin-right: 0.1rem;
  }

  /* The landing's voices: a hand-drawn quote mark hanging in the left margin,
     attribution in the same hand. */
  .testimonial[data-variant="note"] {
    position: relative;
    max-inline-size: 36rem;
    padding-inline-start: 2.625rem; /* spec 42px */
    font-size: 1.2rem;
    color: var(--color-text-prose);
  }

  .testimonial[data-variant="note"] blockquote::before {
    content: "\201C";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    font-family: var(--font-hand);
    font-size: 3rem;
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--color-decorative);
    rotate: -4deg;
  }

  /* Quote and attribution run as one line, the way a remark is written out,
     rather than stacking into a block quotation with a byline under it. */
  .testimonial[data-variant="note"] blockquote,
  .testimonial[data-variant="note"] cite {
    display: inline;
  }

  .testimonial[data-variant="note"] cite {
    font-family: var(--font-hand);
    font-size: 1.4rem;
    font-weight: var(--weight-semi);
    font-style: normal;
    color: var(--color-text);
  }

  .testimonial[data-variant="note"] cite::before {
    content: " - ";
  }
}