.block-twelve {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(480px, 1.28fr);
  gap: clamp(42px, 6vw, 92px);
  padding: clamp(90px, 12vh, 140px) clamp(22px, 5vw, 76px) clamp(90px, 12vh, 130px);
  background: #000;
  color: var(--cream);
}

.block-twelve__heading {
  align-self: start;
  opacity: 0;
  transform: translateY(55px);
  transition: opacity 650ms ease, transform 900ms cubic-bezier(.16, 1, .3, 1);
}

.block-twelve.is-visible .block-twelve__heading {
  opacity: 1;
  transform: translateY(0);
}

.block-twelve__label {
  display: block;
  margin-bottom: clamp(22px, 3vh, 34px);
  color: var(--lime);
  font: 600 10px/1 var(--mono);
  letter-spacing: .08em;
}

.block-twelve__heading h2 {
  max-width: 620px;
  margin: 0;
  font: 400 clamp(42px, 4.6vw, 68px)/.9 var(--sans);
  letter-spacing: -.06em;
  text-wrap: balance;
}

.block-twelve__questions {
  border-top: 1px solid rgba(242, 239, 232, .24);
  opacity: 0;
  transform: translateY(70px);
  transition: opacity 700ms 130ms ease, transform 950ms 130ms cubic-bezier(.16, 1, .3, 1);
}

.block-twelve.is-visible .block-twelve__questions {
  opacity: 1;
  transform: translateY(0);
}

.block-twelve__item {
  border-bottom: 1px solid rgba(242, 239, 232, .24);
}

.block-twelve__item summary {
  display: grid;
  min-height: clamp(62px, 6.4vw, 82px);
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 24px;
  align-items: center;
  padding: 13px 0;
  cursor: pointer;
  list-style: none;
  font: 500 clamp(19px, 1.75vw, 27px)/1.03 var(--sans);
  letter-spacing: -.045em;
}

.block-twelve__item summary::-webkit-details-marker {
  display: none;
}

.block-twelve__item summary:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 6px;
}

.block-twelve__item summary i {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  justify-self: end;
  border: 1px solid rgba(242, 239, 232, .3);
  border-radius: 50%;
  transition: border-color 220ms ease, background 220ms ease, transform 350ms cubic-bezier(.16, 1, .3, 1);
}

.block-twelve__item summary i::before,
.block-twelve__item summary i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1px;
  background: var(--lime);
  content: "";
  transform: translate(-50%, -50%);
}

.block-twelve__item summary i::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 260ms ease;
}

.block-twelve__item[open] summary i {
  border-color: var(--lime);
  background: rgba(214, 255, 47, .1);
  transform: rotate(180deg);
}

.block-twelve__item[open] summary i::after {
  transform: translate(-50%, -50%) rotate(0);
}

.block-twelve__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 450ms cubic-bezier(.16, 1, .3, 1);
}

.block-twelve__item[open] .block-twelve__answer {
  grid-template-rows: 1fr;
}

.block-twelve__answer p {
  max-width: 690px;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: rgba(242, 239, 232, .65);
  font: 400 clamp(15px, 1.15vw, 18px)/1.3 var(--sans);
  letter-spacing: -.015em;
}

.block-twelve__item[open] .block-twelve__answer p {
  padding: 0 46px 22px 0;
}

@media (max-width: 850px) {
  .block-twelve {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 85px 16px 85px;
  }

  .block-twelve__heading h2 {
    font-size: clamp(38px, 9.8vw, 52px);
  }

  .block-twelve__label {
    margin-bottom: 20px;
  }

  .block-twelve__item summary {
    min-height: 66px;
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 12px;
    padding: 11px 0;
    font-size: clamp(18px, 5vw, 23px);
  }

  .block-twelve__item summary i {
    width: 25px;
    height: 25px;
  }

  .block-twelve__answer p {
    font-size: 15px;
  }

  .block-twelve__item[open] .block-twelve__answer p {
    padding-right: 24px;
    padding-bottom: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .block-twelve__heading,
  .block-twelve__questions,
  .block-twelve__answer,
  .block-twelve__item summary i {
    opacity: 1;
    transform: none;
    transition: none;
  }
}