details.accordion summary::marker, details.accordion summary::-webkit-details-marker {
  display: none;
}
details.accordion summary {
  outline: none;
  cursor: pointer;
  padding: .75rem 0;
  line-height: 1rem;
  list-style-type: none;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 21" xmlns="http://www.w3.org/2000/svg" stroke-width="1.6" stroke="%23fff" fill="none"><line x1="12" y1="0" x2="12" y2="21"></line><line x1="24" y1="10" x2="0" y2="10"></line></svg>');
  background-repeat: no-repeat;
  background-size: 1.09375rem 1.25rem;
  background-position: right center;
  transition: letter-spacing 200ms cubic-bezier(.4,1.15,.8,1.2), padding 350ms cubic-bezier(0,1.15,.8,1.3);
}
@media (hover: hover) {
  details.accordion summary:hover {
    letter-spacing: .1em;
  }
}
details.accordion summary:active {
  transition: none;
  opacity: .75;
}
details.accordion[open] summary {
  font-size: 1.25rem;
  letter-spacing: -.01em;
  font-weight: 700;
  padding: 1.5rem 0 1rem;
  transition: letter-spacing 200ms 60ms ease-out, padding 350ms cubic-bezier(0,1.15,.8,1.3);
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 21" xmlns="http://www.w3.org/2000/svg" stroke-width="1.6" stroke="%23fff" fill="none"><line x1="24" y1="10" x2="0" y2="10"></line></svg>');
}
@media (min-width: 768px) {
  details.accordion[open] summary { font-size: 1.375rem }
}
@media (min-width: 1200px) {
  details.accordion[open] summary { font-size: 1.5rem }
}

details.accordion[open] > *:not(summary) {
  -webkit-animation: openAccordion 350ms cubic-bezier(0,1.15,.8,1.15);
  animation: openAccordion 350ms cubic-bezier(0,1.15,.8,1.15);
}
@-webkit-keyframes openAccordion {
  0%      { opacity: 0; -webkit-transform: translateY(-1rem); }
  100%    { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes openAccordion {
  0%      { opacity: 0; transform: translateY(-1rem); }
  100%    { opacity: 1; transform: translateY(0); }
}