.accordion-counter {
  --header-background-color: transparent;
  --background-color: #fff;
  --border-color: #00000040;
  --header-text-color: #111;
  --panel-text-color: #111;
  --panel-background-color: #fff;
}
.accordion-item {
  border-bottom: 1px solid var(--border-color);
  background-color: var(--background-color);
  box-sizing: border-box;
}
.accordion-item .accordion-item-header {
  margin: 0;
  padding: 0;
}
.accordion-item .accordion-trigger {
  font-size: 24px;
  font-weight: 600;
  color: var(--header-text-color);
  text-align: left;
  width: 100%;
  padding: 30px 32px 30px 0;
  display: block;
  cursor: pointer;
  background-color: var(--header-background-color);
  transition: color 0.25s ease;
  position: relative;
  text-decoration: none;
  margin: 0;
  border: 0;
}
.accordion-item .accordion-trigger::before {
  transform: rotate(-90deg);
}
.accordion-item .accordion-trigger::before,
.accordion-item .accordion-trigger::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.06em);
  right: 0.6em;
  border-bottom: 0.1em solid;
  width: 0.6em;
  transition: all 0.3s ease;
}
.accordion-item.is-active .accordion-trigger::before {
  transform: rotate(0deg);
}
.accordion-item.is-active .accordion-trigger::after {
  transform: rotate(180deg);
}
.accordion-item .accordion-panel {
  overflow: hidden;
  transition-property: height, visibility;
  transition-timing-function: ease;
  background-color: var(--panel-background-color);
}
.accordion-item .accordion-panel .accordion-text {
  font-size: 16px;
  color: var(--header-text-color);
  padding-bottom: 30px;
}
.accordion-item.js-enabled .accordion-panel {
  visibility: hidden;
}
.accordion-item.is-active .accordion-panel {
  visibility: visible;
}
.accordion-counter .accordion-group {
  display: flex;
  width: 100%;
}
.accordion-counter .accordion-group .counter {
  flex-basis: 30%;
  font-size: 20px;
  font-weight: 600;
  transition: transform 0.8s, opacity 0.8s ease;
  will-change: transform;
  padding-top: 32px;
  opacity: 0.5;
  max-width: 250px;
}
.accordion-group:has(
    .accordion-item:not(.is-active) .accordion-trigger:is(:hover, :focus)
  )
  .counter {
  transform: translateX(50px);
  opacity: 1;
}
.accordion-group:has(.accordion-item.is-active) .counter {
  opacity: 1;
}
.accordion-counter .accordion-group .accordion-item {
  flex-basis: 100%;
}
@media (max-width: 767px) {
  .accordion-counter .accordion-group {
    gap: 25px;
  }
  .accordion-counter .accordion-group .counter {
    flex-basis: auto;
  }
  .accordion-counter .accordion-group .accordion-item {
    flex-basis: 100%;
  }
  .accordion-group:has(
      .accordion-item:not(.is-active) .accordion-trigger:is(:hover, :focus)
    )
    .counter {
    transform: translateX(0px);
  }
}