.faq-section .container {
  row-gap: 3rem;
}

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

.faq-title {
  text-align: left;
  margin-bottom: 1.5rem;
  font-weight: var(--font-weight-semibold);
}

.faq-item {
  border-top: var(--border-secondary);
  appearance: none;
  overflow: clip;

  &:last-child {
    border-bottom: var(--border-secondary);
  }

  @supports selector(::details-content) and (transition-behavior: allow-discrete) and (interpolate-size: allow-keywords) {
    &::details-content {
      transition: height 0.3s, opacity 0.3s, content-visibility 0.3s;
      transition-behavior: allow-discrete;
      opacity: 0;
      height: 0;
      content-visibility: hidden;
    }
  }

  &[open] {
    @supports selector(::details-content) and (transition-behavior: allow-discrete) and (interpolate-size: allow-keywords) {
      &::details-content {
        opacity: 1;
        height: auto;
        content-visibility: visible;
      }
    }
  }
}

.faq-answer {
  padding-bottom: 1.5rem;
}

.faq-item[open] .faq-question::after {
  rotate: -180deg;
}

.faq-question {
  padding-block: 1.5rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;

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

  &::after {
    mask-image: url("../../assets/icons/angle-down.svg");
    display: block;
    transition: rotate 0.3s;
  }
}