.accordion__item {
  --title-size: 20;
  --toggle-size: 18px;
  border-bottom: 1px solid #ccc;
  padding: 20px 0;
}
.accordion__item.open .accordion__toggle {
  transform: rotate(0deg);
}
.accordion__item:last-of-type {
  border-bottom: 0;
}

.accordion__title {
  -ms-flex-align: start;
      align-items: start;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  font-size: calc(var(--title-size) / var(--base) * 1rem);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 350ms ease;
  transition: grid-template-rows 350ms ease, -ms-grid-rows 350ms ease;
}

.accordion__inner {
  overflow: hidden;
}

.accordion__content {
  padding: 1em 0;
}

.accordion__item.open .accordion__panel {
  grid-template-rows: 1fr;
}

.accordion__toggle {
  transform: rotate(-90deg);
  height: var(--toggle-size);
  width: var(--toggle-size);
  transition: 250ms transform ease;
  top: 3px;
  position: relative;
}

@media (min-width: 992px) {
  .accordion__item {
    --title-size: 28;
    --toggle-size: 20px;
  }
  .accordion__toggle {
    top: 10px;
  }
}