.s-quote {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: var(--space-lg) 0rem;
}

.s-quote__content {
  --quote-mark-size: 5rem;

  box-sizing: border-box;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-rows: max-content auto;
  column-gap: var(--space-base);
  width: 100%;
  margin: 0;
  padding: var(--space-base) var(--space-base) var(--space-base) calc(var(--space-base) / 2);
  background-color: var(--quote-background, var(--color-canvas));
}

.s-quote__mark {
  grid-column: 1;
  grid-row: 1;
  display: block;
  height: calc(var(--quote-mark-size) * 0.36);
  overflow: hidden;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: var(--quote-mark-size);
  line-height: 1;
  color: currentColor;
  opacity: 0.25;
}

.s-quote__text {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

.s-quote__text > :first-child {
  margin-top: 0;
}

.s-quote__text > :last-child {
  margin-bottom: 0;
}

.s-quote__text p + p {
  margin-top: var(--space-base);
}

@media (min-width: 640px) {
  .s-quote__content {
    --quote-mark-size: 7rem;

    width: var(--quote-content-width, 80%);
    margin-inline-start: auto;
    margin-inline-end: 0;
    padding: var(--space-lg);
  }
}