How to open single accordion panel in mobile, and multiple panels in desktop using JS media queries (matchMedia())?

Question

In the snippet below, I have an accordion. My goal is to be able to open a single panel at a time in media queries less than 992px. In media queries greater than 992px, I want to be able to open multiple panels at once.

Part of this is working at the mobile size (I can open the panel, but can't close it). And at desktop, it's not opening at all. I'm not sure where I'm going wrong.

How to control accordion panel open/close behavior based on media queries?

function initAccordion() {
  function handlePanelClick(event) {
    showPanel(event.currentTarget);
  }

  function showPanel(panelHeader) {
    let isActive,
      panel = panelHeader.parentNode,
      expandedPanel = document.querySelector(".panel.active");
    mqTablet = window.matchMedia('(min-width: 992px)');

    isActive = expandedPanel && panel.classList.contains("active") ? true : false;

    if (mqTablet.matches && expandedPanel) {
      expandedPanel.querySelector(".acc-body").style.height = null;
      expandedPanel.classList.remove("active");
    }

    if (!mqTablet.matches && panel && !isActive) {
      panel.classList.add('active');
    }

  }

  let allPanelElements = document.querySelectorAll(".panel");

  for (let i = 0; i < allPanelElements.length; i++) {
    allPanelElements[i]
      .querySelector(".acc-trigger")
      .addEventListener("click", handlePanelClick);
  }

  showPanel(allPanelElements);
}

initAccordion(document.getElementsByClassName("accordion"));

.wrapper {
  margin: 50px auto 0;
  display: flex;
  flex-direction: column;
}

.wrapper a {
  text-decoration: none;
}

.wrapper button {
  border-style: none;
  background: white;
}

.wrapper button::-moz-focus-inner {
  border: 0;
}

.wrapper .accordion {
  margin: 0 0.1rem;
}

.wrapper .accordion .panel {
  min-height: 4rem;
  margin: 0 0.1rem;
}

.wrapper .accordion .panel .acc-trigger {
  display: block;
  font-weight: 400;
  margin: 0;
  padding: 0.5em 0;
  position: relative;
  text-align: left;
  width: 100%;
  cursor: pointer;
  background: 0 0;
}

.wrapper .accordion .panel .acc-trigger .acc-title {
  display: flex;
  align-items: center;
  border: transparent 2px solid;
  outline: 0;
  border-bottom: 1px solid #000A70;
  padding-bottom: 0.5rem;
  transition: all 0.2s ease;
}

.wrapper .accordion .panel .acc-trigger .acc-title h4 {
  font-weight: 800;
  color: #000A70;
  font-size: 1.25rem;
  justify-content: space-between;
  margin-right: 1rem;
  outline: 0;
}

.wrapper .accordion .panel .acc-trigger .acc-title h4:hover {
  color: #005fec;
}

.wrapper .accordion .panel .acc-trigger .acc-title svg.acc-icon {
  cursor: pointer;
  pointer-events: none;
  margin-left: auto;
  z-index: 3;
}

.wrapper .accordion .panel .acc-body {
  height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition: height 0.2s ease-out, opacity 0.2s ease-out;
}

.wrapper .accordion .panel .acc-body ol.custom-list {
  list-style-type: none;
  -webkit-margin-before: 0;
  margin-block-start: 0;
  -webkit-margin-after: 0;
  margin-block-end: 0;
  counter-reset: my-awesome-counter;
}

.wrapper .accordion .panel .acc-body ol.custom-list li {
  counter-increment: my-awesome-counter;
  padding-left: 1.125rem;
  margin: 2rem 0;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #000A70;
}

.wrapper .accordion .panel .acc-body ol.custom-list li::before {
  content: counter(my-awesome-counter) ". ";
  color: #005fec;
}

.wrapper .accordion .panel .acc-body ol.custom-list li:first-child {
  margin-top: 0;
}

.wrapper .accordion .panel .acc-body ol.custom-list li:last-child {
  margin-bottom: 2rem;
}

.wrapper .accordion .panel .acc-body ol.custom-list li a {
  color: #005fec;
}

.wrapper .accordion .panel .acc-body ol.custom-list li a:hover {
  text-decoration: underline;
  text-decoration-color: #005fec;
}

.wrapper .accordion .panel .acc-body ul.custom-list {
  list-style-type: none;
  -webkit-margin-before: 0;
  margin-block-start: 0;
  -webkit-margin-after: 0;
  margin-block-end: 0;
}

.wrapper .accordion .panel .acc-body ul.custom-list li {
  background-image: url(/assets/svg/bullet.svg);
  background-position: 0 0.5rem;
  background-repeat: no-repeat;
  padding-left: 1.125rem;
  margin: 2rem 0;
  font-size: 1rem;
  line-height: 1.5rem;
}

.wrapper .accordion .panel .acc-body ul.custom-list li a {
  color: #005fec;
}

.wrapper .accordion .panel .acc-body ul.custom-list li a:hover {
  text-decoration: underline;
  text-decoration-color: #005fec;
}

.wrapper .accordion .panel .acc-body ul.custom-list li:first-child {
  margin-top: 0;
}

.wrapper .accordion .panel .acc-body ul.custom-list li:last-child {
  margin-bottom: 2rem;
}

.wrapper .accordion .panel.active .acc-body {
  opacity: 1;
  height: auto;
  padding: 0.5rem 0;
  visibility: visible;
}

.wrapper .accordion .panel.active .acc-body p {
  font-size: 1rem;
  line-height: 1.5rem;
}

.wrapper .accordion .panel.active .acc-body p+.embed-youtube {
  margin: 1rem 0;
}

.wrapper .accordion .panel.active .acc-body p a {
  color: #005fec;
}

.wrapper .accordion .panel.active .acc-body p a:hover {
  text-decoration: underline;
  text-decoration-color: #005fec;
}

.wrapper .accordion .panel.active .acc-icon {
  transform: rotate(180deg);
}

.wrapper .accordion .panel.active .acc-trigger .acc-title {
  border-bottom: 0;
}

.wrapper .accordion .panel.active .acc-trigger .acc-title h4 {
  color: #005fec;
}

.wrapper .accordion .panel.active p:last-child {
  border-bottom: 1px solid #000A70;
  padding-bottom: 0.5rem;
}

.acc-title svg.acc-icon {
  transition: all 0.2s ease;
  min-width: 1rem;
}

@media (min-width: 768px) {
  .wrapper {
    flex-direction: row;
  }
  .accordion {
    flex: 1;
  }
}

<section id="questions">
  <div class="container">
    <div class="row justify-content-center align-items-start">
      <h3>Any Questions?</h3>
      <div class="wrapper">
        <div class="accordion">
          <div class="panel">
            <button class="acc-trigger">
                <span class="acc-title">
                  <h4>Lorem ipsum dolor sit amet.</h4>
                  <svg class="acc-icon" width="16" height="11" viewBox="0 0 16 11" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 2.82813L2 0.828126L8 6.82813L14 0.828126L16 2.82813L8 10.8281L0 2.82813Z"
                      fill="#000A70" />
                  </svg>
                </span>
              </button>
            <div class="acc-body">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi enim quas laboriosam itaque harum ab voluptas? Deserunt aliquam pariatur voluptatem odit iure autem eos totam eius consequuntur animi. Omnis, ipsam.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi enim quas laboriosam itaque harum ab voluptas? Deserunt aliquam pariatur voluptatem odit iure autem eos totam eius consequuntur animi. Omnis, ipsam.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi enim quas laboriosam itaque harum ab voluptas? Deserunt aliquam pariatur voluptatem odit iure autem eos totam eius consequuntur animi. Omnis, ipsam.</p>
            </div>
          </div>
          <div class="panel">
            <button class="acc-trigger">
                <span class="acc-title">
                  <h4>Lorem ipsum dolor sit amet.</h4>
                  <svg class="acc-icon" width="16" height="11" viewBox="0 0 16 11" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 2.82813L2 0.828126L8 6.82813L14 0.828126L16 2.82813L8 10.8281L0 2.82813Z"
                      fill="#000A70" />
                  </svg>
                </span>
              </button>
            <div class="acc-body">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi enim quas laboriosam itaque harum ab voluptas? Deserunt aliquam pariatur voluptatem odit iure autem eos totam eius consequuntur animi. Omnis, ipsam.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi enim quas laboriosam itaque harum ab voluptas? Deserunt aliquam pariatur voluptatem odit iure autem eos totam eius consequuntur animi. Omnis, ipsam.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi enim quas laboriosam itaque harum ab voluptas? Deserunt aliquam pariatur voluptatem odit iure autem eos totam eius consequuntur animi. Omnis, ipsam.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>