.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}
.accordion__item {
  background-color: var(--color-bg-accent, #1b1e22);
  border-radius: var(--border-radius, 10px);
  overflow: hidden;
}
.accordion__button {
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
  width: 100%;
  padding: var(--space-4, 16px);
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-weight: 700;
}
@media (min-width: 576px) {
  .accordion__button {
    padding: var(--space-5, 21px) var(--space-6, 32px);
    font-size: var(--font-size-lg, 18px);
  }
}
.accordion__button::before {
  content: "?";
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--color-primary, #D96B1C);
  color: var(--color-primary, #D96B1C);
  line-height: 1;
}
.accordion__button::after {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: var(--color-primary, #D96B1C);
  mask: url("/static-tpl/flux/images/sprite.svg#chevron-down") no-repeat center/contain;
  transition: transform 0.2s ease;
}
.accordion__button.active::after {
  transform: rotate(180deg);
}
.accordion__button span {
  flex-grow: 1;
}
.accordion__content[data-collapsed] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-in-out;
}
.accordion__text {
  padding: 0 var(--space-4, 16px) var(--space-4, 16px);
}
@media (min-width: 768px) {
  .accordion__text {
    padding: 0 var(--space-6, 32px) var(--space-6, 32px);
  }
}