:root {
  --quote-icon-color: var(--color-cyan-light);
  --quote-font-weight: 600;
  --quote-line-height: var(--line-height-default);
}

.quote {
  position: relative;
}

.quote__icon {
  color: var(--quote-icon-color);
  inset-block-start: 0;
  inset-inline-start: -0.15em;
  position: absolute;
  z-index: 1;

  @include use-responsive-sizing(font-size, responsive-map(xs 7rem, xl 9rem));
}

.quote__content {
  padding-block-start: 3rem;
  padding-inline-start: 2.5rem;
  position: relative;
  z-index: 2;
}

.quote__quote {
  font-weight: var(--quote-font-weight);
  line-height: var(--quote-line-height);

  @include use-responsive-sizing(font-size, responsive-map(xs 2rem, xl 2.6rem));
}

.quote__caption {
  font-size: 1.6rem;
  line-height: var(--quote-line-height);
  margin-block-start: 2rem;
}