:is(.main__faq, .main__eq) {
  max-inline-size: 60rem;
  margin-inline: auto;
  padding-block-end: var(--gap-72);
}

.faq__item {
  overflow: hidden;
  border-block: 1px solid transparent;
  border-block-end-color: var(--grey-200);
  background-color: white;
  transition: border-end-end-color 0.3s cubic-bezier(0.07, 0.86, 0.58, 1);

  &::details-content {
    block-size: 0;
    transition: block-size 0.3s cubic-bezier(0.07, 0.86, 0.58, 1), content-visibility 0.3s;
    transition-behavior: allow-discrete;
  }

  & > :last-child:not(footer) {
    padding-block-end: var(--gap-32);
  }
}

.faq__item[open]::details-content {
  block-size: auto;
}
.faq__item[open] .faq__collapse-btn::after {
  rotate: 0deg;
}
.faq__item[open] {
  border-block-end-color: transparent;
}

.faq__item:last-child {
  border-block-end-color: transparent;
}

.faq__question {
  display: flex;
  column-gap: var(--gap-32);
  justify-content: space-between;
  align-items: center;
  padding-block: var(--gap-24);
  user-select: none;
  cursor: pointer;

  & > * {
    pointer-events: none;
  }

  & > span {
    color: var(--black);
    font-size: clamp(var(--font-18), 3.5vw, var(--font-24));
  }

  & .faq__collapse-btn {
    min-inline-size: 2rem;
    aspect-ratio: 1;
    position: relative;
    background-color: var(--black);
    border-radius: 50vw;
    transition: rotate 0.2s ease-in-out;

    &::after,
    &::before {
      content: '';
      inline-size: 0.875rem;
      block-size: 2px;
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: 50%;
      background-color: var(--grey-50);
      border-radius: 50vw;
      translate: -50% -50%;
      transition: rotate 0.2s ease-in-out;
    }

    &::after {
      rotate: 90deg;
    }
  }
}

.faq__answer {
  padding-block-end: var(--gap-18);
  font-size: var(--font-18);
}

.faq__footer {
  padding: var(--gap-12);
  background-color: var(--surface);
  border-radius: var(--radius-6);
}

.main__eq {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-36);
}

.faq__link {
  flex: 1 1 auto;
  inline-size: min(100%, 23.75rem);
  display: grid;
  padding: var(--gap-24);
  border: 1px solid transparent;
  border-radius: var(--radius-16);
  text-decoration: none;

  & h2 {
    font-size: clamp(var(--font-20), 5vw, var(--font-28));
  }

  & p {
    padding-block: var(--gap-24);
    font-size: clamp(var(--font-16), 3.5vw, var(--font-20));
  }

  & div {
    inline-size: 3.5rem;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    border-radius: 50vw;
    margin-inline-start: auto;
    margin-block-start: auto;
  }

  & .icon {
    inline-size: 2rem;
    fill: var(--white);
  }
}

.faq__link[href*='mailto'] {
  grid-area: email;
  background-color: var(--surface);

  & h2 {
    color: var(--black);
    text-wrap: pretty;
  }

  & p {
    color: var(--grey-500);
  }

  & div {
    background-color: var(--black);
  }
}

.faq__link[href*='wa.me'] {
  grid-area: whatsapp;
  background-color: var(--black);

  & h2 {
    color: var(--white);
  }

  & p {
    color: var(--grey-100);
  }

  & div {
    background-color: var(--wa);
  }
}