section {
  padding-block: var(--space-lg);
}

.faq {
  border: var(--accordion-border);
  border-radius: var(--accordion-radius);
  margin-inline: auto;
  max-width: var(--accordion-max-width);
}

details {
  border-bottom: var(--accordion-item-divider);
  padding: var(--accordion-item-padding-block)
    var(--accordion-item-padding-inline);

  &:last-child {
    border-bottom: none;
  }

  summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font: var(--accordion-summary-typography);
    gap: var(--accordion-summary-gap);
    justify-content: space-between;
    list-style: none;
    padding-block: var(--accordion-summary-padding-block);

    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      border-bottom: var(--accordion-marker-border);
      border-right: var(--accordion-marker-border);
      content: "";
      flex-shrink: 0;
      height: var(--accordion-marker-size);
      transform: rotate(45deg);
      transition: transform var(--accordion-marker-transition);
      width: var(--accordion-marker-size);
    }
  }

  &[open] summary::after {
    transform: rotate(-135deg);
  }

  p,
  li {
    color: var(--accordion-content-color);
  }

  a {
    text-decoration: underline;
  }
}

#more {
  background-color: var(--section-muted-background);
  margin-inline: calc(-1 * var(--space-md));
}

.more {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr));
  text-align: center;

  .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);

    header {
      padding-block: 0;
    }

    > .icon {
      align-self: center;
      aspect-ratio: 1;
      background: var(--icon-tile-accent-background);
      border-radius: var(--icon-tile-round-radius);
      display: grid;
      padding: var(--icon-tile-padding);
      place-items: center;
      width: 4rem;
    }
  }
}