.faq-section {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: clamp(50px, 8vw, 150px);
  padding: clamp(92px, 10vw, 160px) 6vw;
  background: #efedea;
}

.faq-heading {
  position: sticky;
  top: 110px;
  align-self: start;
}

.faq-heading h2 {
  margin: 24px 0 0;
  color: #302f2e;
  font: 600 clamp(54px, 6vw, 96px)/.97 'Manrope';
  letter-spacing: -.075em;
}

.faq-heading h2 em {
  color: var(--wine);
  font-style: normal;
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-item {
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 20px;
  background: #fff;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .55s ease, transform .65s cubic-bezier(.16, 1, .3, 1), border-color .3s, background .3s;
}

.faq-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.faq-item:nth-child(2) { transition-delay: .06s; }
.faq-item:nth-child(3) { transition-delay: .12s; }
.faq-item:nth-child(4) { transition-delay: .18s; }
.faq-item:nth-child(5) { transition-delay: .24s; }
.faq-item:nth-child(6) { transition-delay: .3s; }

.faq-item > button {
  width: 100%;
  min-height: 104px;
  padding: 26px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border: 0;
  background: transparent;
  color: #151414;
  text-align: left;
  cursor: pointer;
  font: 600 clamp(18px, 1.55vw, 25px)/1.2 'Manrope';
}

.faq-item > button i {
  position: relative;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.faq-item > button i::before,
.faq-item > button i::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.faq-item > button i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .48s cubic-bezier(.16, 1, .3, 1);
}

.faq-answer > div { overflow: hidden; }

.faq-answer p {
  max-width: 760px;
  margin: 0;
  padding: 0 76px 30px 32px;
  color: #696362;
  font-size: 15px;
  line-height: 1.65;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .3s ease, transform .4s ease;
}

.faq-item:hover,
.faq-item.is-open {
  border-color: #d7c5ca;
  background: #fffdfd;
}

.faq-item.is-open > button { color: var(--wine); }
.faq-item.is-open > button i { transform: rotate(45deg); }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-item.is-open .faq-answer p { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .faq-section { grid-template-columns: 1fr; }
  .faq-heading { position: static; }
  .faq-heading h2 br { display: none; }
}

@media (max-width: 600px) {
  .faq-section { padding: 78px 20px; gap: 42px; }
  .faq-heading h2 { font-size: 50px; }
  .faq-item { border-radius: 15px; }
  .faq-item > button { min-height: 86px; padding: 22px 20px; font-size: 18px; }
  .faq-answer p { padding: 0 54px 24px 20px; font-size: 13px; }
}