.collapse {
  position: relative;
}

.collapse__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  color: #000;
  font-size: var(--fs-6);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.collapse__header::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M14.364 5.29301C14.1764 5.10554 13.9221 5.00023 13.657 5.00023C13.3918 5.00023 13.1375 5.10554 12.95 5.29301L7.99995 10.243L3.04995 5.29301C2.86135 5.11085 2.60875 5.01006 2.34655 5.01234C2.08435 5.01462 1.83354 5.11979 1.64813 5.30519C1.46273 5.4906 1.35756 5.74141 1.35528 6.00361C1.353 6.26581 1.45379 6.51841 1.63595 6.70701L7.29295 12.364C7.48048 12.5515 7.73479 12.6568 7.99995 12.6568C8.26512 12.6568 8.51942 12.5515 8.70695 12.364L14.364 6.70701C14.5514 6.51948 14.6567 6.26518 14.6567 6.00001C14.6567 5.73485 14.5514 5.48054 14.364 5.29301Z' fill='black'/%3E%3C/svg%3E");
  transition: transform 0.3s ease;
  font-size: 0.75em;
  line-height: 1;
  transform: rotate(180deg);
}

.collapse__content {
  overflow: hidden;
  height: auto;
  margin-top: 0;
  /* fallback if JS disabled */
  transition: 0.3s ease;
}

.collapse.is-open .collapse__content {
  margin-top: 1.125rem;
}

/* Open state */
.collapse.is-open .collapse__header::after {
  transform: rotate(0);
}