.quotes__wrapper {
  box-shadow: 0 0 2.188rem 1px var(--color-pink-1);
}

.quotes__search-wrapper {
  background: linear-gradient(to right, var(--color-pink-1), var(--color-orange-1), var(--color-yellow-1), var(--color-green-1), var(--color-teal-1), var(--color-dark-purple-2));
}

.quotes__row {
  grid-template:
    'quoteId quoteText'
    'blank quoteAuthor';
  grid-template-columns: 3.75rem auto;
}

.quote::after {
  content: '';
  position: absolute;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-pink-1), var(--color-teal-1), var(--color-dark-purple-2), transparent);
  bottom: -0.3125em;
  left: 0;
  width: 100%;
  opacity: 1;
}

.item1 {
  grid-area: quoteId;
}

.item2 {
  grid-area: quoteText;
}

.item3 {
  grid-area: blank;
}

.item4 {
  grid-area: quoteAuthor;
}

@media screen and (max-width: 767px) {
  .quotes__row {
    grid-template:
      'quoteId quoteText'
      'blank quoteAuthor';
    grid-template-columns: 3.125rem auto;
  }

  .quotes__wrapper {
    box-shadow: 0 0 1.563rem 1px var(--color-pink-1);
  }
}