.quote {
  display: grid;
  color: var(--white);
  background-color: var(--accent);
  border-radius: 10px;
}
@media (min-width: 740px) {
  .quote {
    row-gap: 10px;
  }
}
@media (min-width: 1200px) {
  .quote {
    padding: 36px;
  }
}
@media (min-width: 740px) and (max-width: 1199.98px) {
  .quote {
    padding: 20px;
  }
}
@media (max-width: 739.98px) {
  .quote {
    row-gap: 6px;
    padding: 14px;
  }
}
.quote_content {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
.quote_content::before, .quote_content::after {
  align-self: start;
  width: var(--_size);
  height: var(--_size);
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 40 40'%3E%3Cpath fill='%23FABD00' d='M16.67 28.33h-5l-3.34-6.66v-10h10v10h-5M30 28.33h-5l-3.33-6.66v-10h10v10h-5L30 28.33Z'/%3E%3C/svg%3E") no-repeat center/contain;
}
@media (min-width: 740px) {
  .quote_content::before, .quote_content::after {
    --_size: 40px;
  }
}
@media (max-width: 739.98px) {
  .quote_content::before, .quote_content::after {
    --_size: 24px;
  }
}
.quote_content::after {
  transform: scaleX(-1);
}
@media (min-width: 740px) {
  .quote_content {
    column-gap: 10px;
  }
}
@media (max-width: 739.98px) {
  .quote_content {
    column-gap: 6px;
  }
}
.quote_author {
  width: fit-content;
  padding-inline: 2px;
  margin-inline: auto;
  font-family: Ubuntu, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--yellow-400);
}
@media (min-width: 740px) {
  .quote_author {
    padding-block: 6px;
  }
}
@media (max-width: 739.98px) {
  .quote_author {
    padding-block: 4px;
  }
}
.quote_author:is(a) {
  position: relative;
}
.quote_author:is(a)::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background-color: currentColor;
  transition: opacity 0.15s ease-in-out;
}
.quote_author:is(a):hover, .quote_author:is(a):focus-visible {
  color: var(--yellow-300);
}
.quote_author:is(a):hover::after, .quote_author:is(a):focus-visible::after {
  opacity: 0;
}