:root {
  --quotes-background: var(--color-turqoise-200);
  --quotes-gap: 1rem;

  --quote-background: var(--color-green-400);
  --quote-rating: var(--color-turqoise-500);
  --quote-color: var(--color-white);
  --quote-minwidth: min(90vw, 30rem);
  --quote-padding: 2rem;
  --quote-radius: clamp(2rem, 4vw, 2.5rem);
  --quote-gap: 4rem 1rem;
}

  @media (min-width: 640px) {:root {
    --quotes-gap: 1.5rem;
    --quote-maxwidth: 32rem
}
  }

.quotes {
  --section-color-background: var(--quotes-background);
}

.quotes-title {
  margin-bottom: 2rem;
}

.quotes-wrapper {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  grid-gap: 1rem;
  gap: 1rem;
  grid-gap: var(--quotes-gap);
  gap: var(--quotes-gap);
  padding-bottom: 3rem;
  padding-bottom: calc(var(--quotes-gap)*3);
  padding-right: 1rem;
  padding-right: var(--quotes-gap);
}

.quotes-wrapper > * {
    flex: 1 1 auto;
  }

.quote {
  background: var(--color-green-400);
  background: var(--quote-background);
  color: var(--color-white);
  color: var(--quote-color);
  padding: 2rem;
  padding: var(--quote-padding);
  padding-bottom: 1.5rem;
  padding-bottom: calc(var(--quote-padding)*0.75);
  border-radius: clamp(2rem, 4vw, 2.5rem);
  border-radius: var(--quote-radius);
  min-width: min(90vw, 30rem);
  min-width: var(--quote-minwidth);
  max-width: var(--quote-maxwidth);
  display: grid;
  grid-gap: 4rem 1rem;
  gap: 4rem 1rem;
  grid-gap: var(--quote-gap);
  gap: var(--quote-gap);
  grid-template-areas:
    "text text"
    "rating author";
}

.quote-author {
  grid-area: author;
  justify-self: flex-end;
  align-self: flex-end;
  font-size: 0.75rem;
  font-style: normal;
}

.quote-text {
  grid-area: text;
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.75;
}

.quote-rating {
  grid-area: rating;
  color: var(--color-turqoise-500);
  color: var(--quote-rating);
  display: flex;
  align-self: flex-end;
  grid-gap: 3px;
  gap: 3px;
}