.faq-title {
  margin-bottom: var(--space-xl);
}

.faq-item {
  border-top: 1px solid rgb(var(--frame));
}

.faq-item:last-child {
  border-bottom: 1px solid rgb(var(--frame));
}

.faq-question {
  min-height: 4rem;
  padding-block: var(--space-m);
  color: rgb(var(--text));
  font-size: 1rem;
}

.faq-question:hover,
.faq-item[open] .faq-question {
  color: rgb(var(--heading));
}

.faq-answer {
  max-width: 58ch;
  margin: 0;
  padding: 0 var(--space-l) var(--space-l) 0;
  color: rgb(var(--text));
  font-size: 0.9375rem;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-question {
    transition: color 300ms;
  }
}

@media (min-width: 64em) {
  .faq > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: 6rem;
    align-items: start;
  }

  .faq-list {
    grid-column: 2;
    grid-row: 1;
  }
}