.accordion {
  --black-trans-5: hsl(var(--primary-hsl) / 3%);
}
.accordion + * {
  margin-block-start: 0;
}
.accordion__header {
  display: flex;
  padding: 2rem;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 700;
}
details[open] .accordion__header {
  color: var(--primary);
  background-color: var(--black-trans-5);
}
.accordion__header:hover {
  color: var(--primary);
  background-color: var(--black-trans-5);
}
.accordion__header-title {
  margin: 0 !important;
  font-size: calc(var(--text-m) * 1.2);
}
.accordion__header-indicator {
  margin-block-start: 0 !important;
  height: 2rem;
  display: flex;
}
details[open] .accordion__header-indicator {
  rotate: 180deg;
}
.accordion__content {
  padding: 0 2rem 2rem 2rem;
  background: var(--black-trans-5);
}