How to give a slide effect on accordion with CSS

Question

I did set the height of .accordion__content manually like 8.2rem to give a soft slide effect. If I set it to something like auto or min-height, it's not soft. Is there a better way than manually setting the height like below? without javascript.

html {
  font-size: 62.5%;
}
h5,
p {
  margin: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
}
body {
  margin: 0;
  padding: 0;
  background: black;
}

.target {
  display: block;
  top: 0;
  left: 0;
  position: fixed;
}
.open-accordion {
  display: block;
}
.close-accordion {
  display: none;
}
span:target ~ .open-accordion {
  display: none;
}
span:target ~ .close-accordion {
  display: block;
}

.accordion {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.accordion__li {
  width: 45rem;
  background: white;
  border-radius: 0.4rem;
  padding: 2rem;
}

.accordion__li a > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.accordion__li a > div div {
  display: flex;
  align-items: center;
}
.accordion__num {
  font-size: 1.8rem;
  margin-right: 1.3rem;
}
.accordion__title {
  font-size: 1.6rem;
}
.accordion__li i {
  font-size: 1.3rem;
  position: relative;
  top: 0.1rem;
  right: 0.5rem;
}

/* When accordion is open */

.accordion__content {
  font-size: 1.6rem;
  line-height: 1.5;
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.accordion__li:first-of-type span:target ~ .accordion__content {
  height: 8.2rem;
  padding-top: 1rem;
}
.accordion__li:nth-of-type(2) span:target ~ .accordion__content,
.accordion__li:nth-of-type(3) span:target ~ .accordion__content {
  height: 13rem;
  padding-top: 1rem;
}

<ul class="accordion">
  <span class="target" id="accordion"></span>
  <li class="accordion__li">
    <span class="target" id="accordion1"></span>
    <a href="#accordion1" class="open-accordion" title="open">
      <div>
        <div>
          <span class="accordion__num">01</span>
          <h5 class="accordion__title">
            Non consectetur a erat nam at lectus urna duis?
          </h5>
        </div>
        <i class="fas fa-chevron-down"></i>
      </div>
    </a>
    <a href="#accordion" class="close-accordion" title="close">
      <div>
        <div>
          <span class="accordion__num">01</span>
          <h5 class="accordion__title">
            Non consectetur a erat nam at lectus urna duis?
          </h5>
        </div>
        <i class="fas fa-chevron-up"></i>
      </div>
    </a>
    <p class="accordion__content">
      Feugiat pretium nibh ipsum consequat. Tempus iaculis urna id
      volutpat lacus laoreet non curabitur gravida. Venenatis lectus magna
      fringilla urna porttitor rhoncus dolor purus non.
    </p>
  </li>
  <li class="accordion__li">
    <span class="target" id="accordion2"></span>
    <a href="#accordion2" class="open-accordion" title="open">
      <div>
        <div>
          <span class="accordion__num">02</span>
          <h5 class="accordion__title">
            Feugiat scelerisque varius morbi enim nunc?
          </h5>
        </div>
        <i class="fas fa-chevron-down"></i>
      </div>
    </a>
    <a href="#accordion" class="close-accordion" title="close">
      <div>
        <div>
          <span class="accordion__num">02</span>
          <h5 class="accordion__title">
            Feugiat scelerisque varius morbi enim nunc?
          </h5>
        </div>
        <i class="fas fa-chevron-up"></i>
      </div>
    </a>
    <p class="accordion__content">
      Dolor sit amet consectetur adipiscing elit pellentesque habitant
      morbi. Id interdum velit laoreet id donec ultrices. Fringilla
      phasellus faucibus scelerisque eleifend donec pretium. Est
      pellentesque elit ullamcorper dignissim. Mauris ultrices eros in
      cursus turpis massa tincidunt dui.
    </p>
  </li>
  <li class="accordion__li">
    <span class="target" id="accordion3"></span>
    <a href="#accordion3" class="open-accordion" title="open">
      <div>
        <div>
          <span class="accordion__num">03</span>
          <h5 class="accordion__title">
            Dolor sit amet consectetur adipiscing elit?
          </h5>
        </div>
        <i class="fas fa-chevron-down"></i>
      </div>
    </a>
    <a href="#accordion" class="close-accordion" title="close">
      <div>
        <div>
          <span class="accordion__num">03</span>
          <h5 class="accordion__title">
            Dolor sit amet consectetur adipiscing elit?
          </h5>
        </div>
        <i class="fas fa-chevron-up"></i>
      </div>
    </a>
    <p class="accordion__content">
      Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis
      orci. Faucibus pulvinar elementum integer enim. Sem nulla pharetra
      diam sit amet nisl suscipit. Rutrum tellus pellentesque eu
      tincidunt. Lectus urna duis convallis convallis tellus. Urna
      molestie at elementum eu facilisis sed odio morbi quis
    </p>
  </li>
</ul>
<script src="https://kit.fontawesome.com/70e0dc75f1.js" crossorigin="anonymous"></script>

Answer 1

Please try this:

height: max-content;

This set height of element based on its content.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/max-content