details {
  interpolate-size: allow-keywords; /* Allows animation between numeric and text values; in this case block-size: 0 --> auto; */
  &::details-content {
    block-size: 0; /* Initial state is 0 height */
    overflow: hidden; /* Prevent content margins from being visible while closed, and contents from being visible during animation */
    @media (prefers-reduced-motion: no-preference) { /* Be nice to others */
      transition: all 0.25s ease-in;
      transition-behavior: allow-discrete; /* Switch between numeric and text value will happen at 50% */
    }
  }
  &[open]::details-content {
    block-size: auto; /* Open state is 100% height */
  }
}