.faq {
  display: flex;
  flex-direction: column;
}

.faq__question {
  display: inline-flex;
  padding: 1em 1.5em;
  background: linear-gradient(135deg, var(--color-bg--secondary) 0%, var(--color-bg--secondary-glint) 100%);
  border-radius: 0 1em 1em 1em;
  max-width: 90%;
  line-height: 1.3 !important;

  @media (min-width: 40em) { max-width: 80%; }

  [data-color-scheme="dark"] & {
    background: var(--color-secondary);
    color: var(--color-txt--reversed);
  }
}

.faq__answer {
  padding: 1.25em 1.5em;
  background: linear-gradient(135deg, var(--color-bg--note) 0%, var(--color-bg--note-glint) 100%);
  border-radius: 1em 0 1em 1em;
  margin-left: 2em;
  max-width: 90%;
  align-self: flex-end;
  line-height: 1.3;

  @media (min-width: 40em) { max-width: 80%; }

  [data-color-scheme="dark"] & { color: var(--color-txt--reversed); }
}