<details open>
  <summary>Summary</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</details>
<hr />
<details name="accordion">
  <summary>Summary1</summary>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</details>
<details name="accordion">
  <summary>Summary2</summary>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</details>
<hr />
<details class="upside-down">
  <summary>Summary</summary>
  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</details>

*,
::before,
::after {
  box-sizing: border-box;
  line-height: var(
    --line-height,
    calc(var(--em-size, 1rem) * var(--em-ratio, 1) * var(--em-scale, 1) + 1em)
  );
}
:is(p, hr, details) {
  --sp: calc(var(--sp-size, 1rem) * var(--sp-ratio, 1) * var(--sp-scale, 1));
  margin: 0;

  :where(&) + & {
    margin-block-start: var(--sp);
  }
  :is(hr, details):where(:has(+ &)) {
    margin-block-end: var(--sp);
  }
  :where(details) & {
    --sp-scale: calc(1 / 2);
  }
}
:is(p) {
  --sp-size: 2rem;
}
:is(hr, details) {
  --sp-size: 4rem;
}
html {
  container: root / inline-size;
  font-family: ui-sans-serif, sans-serif;
}
body {
  --em-size: 1rem;
  --em-ratio: calc(3 / 4);
  font-size: var(--em-size);
  margin: 0;
  padding-block: 2rem;
  padding-inline: max(2rem, 50cqi - 20rem);
}
hr {
  border: solid 0;
  border-block-start-width: 1px;
  color: inherit;
  inline-size: calc(100% / 5);
  margin-inline: auto;
}
summary {
  cursor: pointer;
}
details {
  --transition-time: 0.5s;

  border: solid 1px;
  display: grid;
  grid: auto 1fr / 1fr;
  align-content: start;
  align-items: start;
  overflow: hidden;

  @media (prefers-reduced-motion: no-preference) {
    transition: grid var(--transition-time);
  }

  & > summary {
    padding-block: 1rem;
    padding-inline: 2rem;
  }
  &::details-content {
    background: color-mix(in srgb, transparent, currentcolor 5%);
    border: solid 0;
    border-block-start-width: 1px;
    content-visibility: visible;
    overflow: hidden;
    padding-block: 2rem;
    padding-inline: 2rem;

    @media (prefers-reduced-motion: no-preference) {
      transition-property: border-style, padding, visibility;
      transition-duration: 0s, var(--transition-time), 0s;
      transition-behavior: allow-discrete;
    }
  }
  &:not([open]) {
    grid: auto 0fr / 1fr;

    &::details-content {
      border-style: none;
      padding-block: 0;
      visibility: hidden;

      @media (prefers-reduced-motion: no-preference) {
        transition-delay: var(--transition-time), 0s, var(--transition-time);
      }
    }
  }

  &[name]:has(+ &[name]) {
    margin-block-end: 0;
  }
  &[name] + &[name] {
    margin-block-start: -1px;
  }

  &.upside-down {
    grid:
      "details-content" 1fr
      "summary" auto
      / 1fr;
    align-content: end;
    align-items: end;

    & > summary {
      display: block;
      grid-area: summary;

      &::-webkit-details-marker {
        display: none;
      }
      &::before {
        background: linear-gradient(currentcolor 0 0) no-repeat 50% / 0.125rem
            100%,
          linear-gradient(currentcolor 0 0) no-repeat 50% / 100% 0.125rem;
        block-size: 1em;
        content: "";
        display: inline-block;
        inline-size: 1em;
        margin-block: calc(0.5lh - 0.5em);
        margin-inline: 0 0.5em;
        transition: rotate var(--transition-time) var(--transition-time);
        vertical-align: top;
      }
    }
    &::details-content {
      border-width: 0;
      border-block-end-width: 1px;
      grid-area: details-content;
    }
    &[open] > summary::before {
      rotate: 405deg;
    }
    &:not([open]) {
      grid:
        "details-content" 0fr
        "summary" auto
        / 1fr;
    }
  }
}