.expandable-content {
  --expandable-content-max-height: 220px;
  --expandable-content-expanded-max-height: 9999px;
  --expandable-content-transition-duration: 0.22s;
  position: relative;
}

.expandable-content__body {
  position: relative;
  transition: max-height var(--expandable-content-transition-duration) ease;
}

.has-js .expandable-content.is-measuring .expandable-content__body,
.expandable-content.is-collapsible .expandable-content__body {
  max-height: var(--expandable-content-expanded-max-height);
  overflow: hidden;
}

.has-js .expandable-content.is-measuring .expandable-content__body,
.expandable-content.is-collapsible:not(.is-expanded) .expandable-content__body {
  max-height: var(--expandable-content-max-height);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 58px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 58px), transparent);
}

.expandable-content__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ambient-mint-dark);
  cursor: pointer;
  font: inherit;
  font-weight: bold;
  line-height: 1.2;
}

.expandable-content__toggle[hidden] {
  display: none;
}

.expandable-content__toggle:hover {
  color: var(--color-font-primary);
}

.expandable-content__toggle:focus-visible {
  outline: 2px solid var(--color-ambient-mint-dark);
  outline-offset: 4px;
}

.expandable-content__icon {
  width: 16px;
  height: 16px;
  transition: transform 0.18s ease;
}

.expandable-content.is-expanded .expandable-content__icon {
  transform: rotate(180deg);
}

/* Safari and older browsers use the max-height transition above. */
@supports (interpolate-size: allow-keywords) {
  .expandable-content {
    interpolate-size: allow-keywords;
  }

  .has-js .expandable-content.is-measuring .expandable-content__body,
  .expandable-content.is-collapsible .expandable-content__body {
    block-size: auto;
    max-height: none;
    transition: block-size var(--expandable-content-transition-duration) ease;
  }

  .has-js .expandable-content.is-measuring .expandable-content__body,
  .expandable-content.is-collapsible:not(.is-expanded) .expandable-content__body {
    block-size: var(--expandable-content-max-height);
    max-height: none;
  }
}

@media (min-width: 650px) {
  .expandable-content {
    --expandable-content-max-height: 320px;
  }
}