expand nav in mobile and tablet

Why is the menu bar not visible in tablet mode. I have to click on the colored part to see it. It works well in mobile mode but has problems in tablet mode. I checked everything but did not understand how the collapsible__content class does not work in tablet mode.

Now in tablet mode, the navigation is not visible and I have to click on the gray bar to make the menus appear, while in tablet mode, you do not need to click on the menu to be seen.

index.html

    <header>
      <nav class="nav collapsible">
        <a class="nav__brand" href="#">Gustoso</a>
        <svg class="icon icon--white nav__toggler">
          <use href="images/sprite.svg#menu"></use>
        </svg>
        <ul class="list nav__list collapsible__content">
          <li class="nav__item">
            <a href="#">Welcome<span class="between__nav">~</span></a>
          </li>
          <li class="nav__item">
            <a href="#">Menu<span class="between__nav">~</span></a>
          </li>
          <li class="nav__item">
            <a href="#">reservations<span class="between__nav">~</span></a>
          </li>
          <li class="nav__item">
            <a href="#">News<span class="between__nav">~</span></a>
          </li>
          <li class="nav__item">
            <a href="#">Contact</a>
          </li>
        </ul>
      </nav>
    </header>

    <script src="js/main.js"></script>

style.css

.list {
  list-style-type: none;
  padding-left: 0;
}

/* Navigation Bar */
header {
  background: rgba(86, 83, 76, 0.5294117647058824);
}

.nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.6rem 1rem;
}

.nav__list {
  width: 100%;
  margin: 0;
}

.nav__item {
  padding: 0.9rem 0.2rem;
  border-bottom: 1px solid #826c6c;
}

.nav__item > a:hover {
  font-weight: bolder;
}

.nav__item > a {
  color: var(--color-heading);
  text-transform: uppercase;
  font-size: 1.7rem;
}

.nav__item > a span {
  display: none;
}

.between__nav {
  margin: auto 0.9rem;
  font-size: 1.4rem;
  font-weight: 400;
}

.nav__brand {
  font-family: scriptina, Arial, Helvetica, sans-serif;
  font-size: 3rem;
  letter-spacing: 9px;
  line-height: 24px;
  color: #ffffff;
  transform: translateY(-11px);
}

.nav__toggler {
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.15s;
}

.nav.collapsible--expanded .nav__toggler {
  opacity: 1;
  box-shadow: 0 0 0 3px #666;
  border-radius: 5px;
  transform: rotate(-90deg);
}

@media screen and (min-width: 768px) {
  .nav__toggler {
    display: none;
  }

  .nav__list {
     max-height: 100%;
    opacity: 1;
    width: auto;
    display: flex;
    font-size: 1.6rem;
  }

  .nav__item {
    border: 0;
  }

  .nav__item > a span {
    display: inline-flex;
  }
}

/* Collapsibles */
.collapsible__content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s;
}

.collapsible--expanded .collapsible__content {
  max-height: 100vh;
  opacity: 1;
}

main.js

const collapsibles = document.querySelectorAll(".collapsible");
collapsibles.forEach((item) =>
  item.addEventListener("click", function () {
    this.classList.toggle("collapsible--expanded");
  })
);