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

.quote-box {
  background-color: var(--quote-box-background-color);
  display: grid;

  @include mq($from: m) {
    grid-template-columns: 1fr 1fr;
  }
}

.quote-box__image {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;

  @include mq($from: m) {
    order: 1;
  }
}

.quote-box__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;

  &:only-child {
    grid-column-end: span 2;
  }

  @include use-responsive-sizing(padding-top padding-bottom, responsive-map(xs 3rem, l 6rem));
  @include use-responsive-sizing(padding-right padding-left, responsive-map(xs 2rem, xl 5rem));
}

.quote-box__icon {
  color: var(--quote-box-icon-color);
  inset-block-start: 1.25rem;
  inset-inline-start: -0.5rem;
  position: absolute;
  z-index: 1;

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

  @include mq($from: m) {
    inset-block-start: 2rem;
    inset-inline-start: 1rem;
  }
}

.quote-box__quote {
  font-weight: var(--quote-box-font-weight);
  line-height: var(--quote-box-line-height);
  position: relative;
  z-index: 2;

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

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