.faq-title {
  grid-column-gap: var(--gap-xxl);
  grid-row-gap: var(--gap-xxl);
  text-align: center;
  margin-bottom: calc(2 * var(--gap-xl));
  flex-flow: column;
  display: flex;
  position: relative;
}

.heading-large {
  letter-spacing: -.04em;
  font-family: "GT Walsheim Pro", Haffer XH, Arial, sans-serif;
  font-size: 3.875em;
  font-weight: 900;
  line-height: 1;
  margin: 0;
}

.faq-wrap {
  position: relative;
}

.faq-collection {
  width: 100%;
}

[data-collection-status="not-active"] {
  display: none;
}

.faq-list {
  border-bottom: 1px solid var(--color-neutral-400);
}

.faq-item-top {
  padding-top: var(--gap-sm);
  padding-bottom: var(--gap-sm);
  grid-column-gap: var(--gap-m);
  grid-row-gap: var(--gap-m);
  border-top: var(--stroke-weight) solid var(--color-neutral-400);
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.faq-item-bottom {
  grid-template-rows: 0fr;
  display: grid;
  position: relative;
  overflow: hidden;
  transition: grid-template-rows var(--duration-default) var(--cubic-default);
}

[data-accordion-status="active"] .faq-item-bottom {
  grid-template-rows: 1fr;
}

.text-large {
  font-variation-settings: "wght" 420;
  letter-spacing: -.02em;
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 1.1875em;
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
}

.text-large.font-medium {
  font-variation-settings: "wght" 550;
}

.faq-item-icon {
  aspect-ratio: 1;
  flex: none;
  width: .75em;
  transition: transform var(--duration-default) var(--cubic-default);
}

[data-accordion-status="active"] .faq-item-icon {
  transform: rotate(315deg);
}

.icon {
  width: 100%;
  height: 100%;
  display: flex;
}

svg:not(:root) {
  overflow: hidden;
}

.faq-item-bottom-wrap {
  flex-flow: column;
  height: 100000%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.faq-item-bottom-content {
  padding-bottom: var(--gap-sm);
}


.text-content p {
  margin-bottom: var(--gap-s);
  font-size: 1em;
  line-height: 1.3;
  margin-top: 0;
}

.text-content a {
  color: var(--color-purple);
  text-decoration: underline;
}

@media screen and (min-width: 992px) { 
  .container { 
    max-width: var(--size-container); 
    padding: 0 var(--container-padding);
  } 

  .container.container-small { 
    max-width: calc(var(--size-container) * 0.5);
  } 
}