.quote {
  --quote-frame-color: var(--s2a-color-gray-800);
  --quote-dot-color: var(--s2a-color-gray-25);
  --quote-frame-width: 1px;
  --quote-dash-size: 3px;
  --quote-pad: var(--s2a-spacing-lg);
  --quote-gap: var(--s2a-layout-lg);
  --quote-content-min-height: calc(600px - 2 * var(--quote-pad));
  --quote-copy-max-width: 1312px; /* per Figma spec */

  position: relative;
  box-sizing: border-box;
  padding: var(--quote-pad);
  margin-inline: calc(-1 * var(--grid-padding));
  color: var(--s2a-color-content-default);

  .foreground {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--quote-gap);
    min-height: var(--quote-content-min-height);
    margin: 0;

    /* Horizontal guide lines */
    &::before {
      content: "";
      position: absolute;
      inset-block: 0;
      left: 50%;
      width: calc(100% + 2 * var(--quote-pad));
      transform: translateX(-50%);
      border-block: var(--quote-frame-width) solid var(--quote-frame-color);
      pointer-events: none;
    }

    /* Vertical guide lines + centered dashed line */
    &::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block: calc(-1 * var(--quote-pad));
      border-inline: var(--quote-frame-width) solid var(--quote-frame-color);
      background: repeating-linear-gradient(
          var(--quote-frame-color) 0 var(--quote-dash-size),
          transparent var(--quote-dash-size) calc(2 * var(--quote-dash-size))
        ) 50% 0 / var(--quote-frame-width) 100% no-repeat;
      pointer-events: none;
    }
  }

  /* Corner dots */
  .quote-frame {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(var(--quote-dot-color), var(--quote-dot-color)),
      linear-gradient(var(--quote-dot-color), var(--quote-dot-color)),
      linear-gradient(var(--quote-dot-color), var(--quote-dot-color)),
      linear-gradient(var(--quote-dot-color), var(--quote-dot-color));
    background-repeat: no-repeat;
    background-size: var(--quote-frame-width) var(--quote-frame-width);
    background-position: 0 0, 100% 0, 0 100%, 100% 100%;
    pointer-events: none;
    z-index: 1;
  }
}

.quote-copy {
  position: relative;
  z-index: 1;
  max-width: var(--quote-copy-max-width);
  margin: 0;
  text-wrap: pretty;
}

.quote-attribution {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;

  .quote.center-footer & {
    align-items: center;
    text-align: center;
  }

  .quote.right-footer & {
    align-items: flex-end;
    text-align: end;
  }
}

.quote-name {
  margin: 0;
}

.quote-role {
  margin: 0;
  color: var(--s2a-color-content-subtle);
}

@media (width >= 768px) {
  .quote {
    --quote-pad: var(--s2a-spacing-3xl);
    --quote-gap: var(--s2a-layout-xl);
    --quote-content-min-height: 0;

    .foreground {
      justify-content: flex-start;
    }
  }
}

@media (width >= 1280px) {
  .quote {
    --quote-pad: var(--s2a-spacing-4xl);
    --quote-gap: var(--s2a-layout-2xl);
  }
}