Fully responsive collapsible images not functioning correctly

I have a wall of images and when an image is clicked a separate div rolls down underneath the row in which the image was clicked. At the moment it is fully responsive, meaning when the screen size is reduced it creates more rows and the collapsible always drops down underneath the image row. I need the collapsible div to span across the full container.

However, in my code now, the collapsible div, with class .info, keeps shifting left and right depending which image is being clicked. I just want the .info div to stay within the container and stay in the same place for each row.

For example, when an image is clicked on in the first row the .info div rolls down and shows the information. Then, when the third image on the same row is clicked the .info div is in the same place, but just the text changes. Then, when an image on the second row is clicked the .info on the first row is closed then the .info div opens up underneath the second row spanning the full container width.

function toggleInfo(element) {
  const allPartners = document.querySelectorAll('.partner');
  allPartners.forEach(partner => {
    if (partner !== element) {
      partner.classList.remove('active');
    }
  });

  element.classList.toggle('active');
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  overflow-x: hidden;
  /* Prevent horizontal scrolling */
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.partner {
  position: relative;
  width: calc(25% - 5px);
  /* 4 images per row with 5px gap */
  cursor: pointer;
  margin-bottom: 20px;
  /* Space for the info box */
}

.image-wrapper {
  position: relative;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s;
}

.gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  display: flex;
  justify-content: center;
  align-items: center;
}

.name {
  color: white;
  font-size: 1.5rem;
  z-index: 1;
}

.info {
  display: none;
  background-color: white;
  padding: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;
  width: 100vw;
  left: 10px;
  /* Adjust for body padding */
  transform: translateX(-50%);
  margin-top: 10px;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

.partner.active .info {
  display: block;
  animation: slideDown 0.3s ease;
}

.partner.active .image-wrapper img {
  opacity: 1;
}

.partner:not(.active) .image-wrapper img {
  opacity: 0.5;
}

@keyframes slideDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 500px;
    /* Adjust as needed */
    opacity: 1;
  }
}


/* Responsive Design */

@media (max-width: 800px) {
  .partner {
    width: calc(50% - 5px);
    /* 2 images per row on smaller screens */
  }
}

@media (max-width: 500px) {
  .partner {
    width: 100%;
    /* 1 image per row on very small screens */
  }
}

<div class="container">
  <!-- Generate 8 partner entries with placeholder images -->
  <div class="partner" onclick="toggleInfo(this)">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/200x300" alt="Partner 1">
      <div class="gradient">
        <span class="name">Partner 1</span>
      </div>
    </div>
    <div class="info">
      <p>More information about Partner 1...</p>
    </div>
  </div>

  <div class="partner" onclick="toggleInfo(this)">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/200x300" alt="Partner 2">
      <div class="gradient">
        <span class="name">Partner 2</span>
      </div>
    </div>
    <div class="info">
      <p>More information about Partner 2...</p>
    </div>
  </div>

  <div class="partner" onclick="toggleInfo(this)">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/200x300" alt="Partner 3">
      <div class="gradient">
        <span class="name">Partner 3</span>
      </div>
    </div>
    <div class="info">
      <p>More information about Partner 3...</p>
    </div>
  </div>

  <div class="partner" onclick="toggleInfo(this)">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/200x300" alt="Partner 4">
      <div class="gradient">
        <span class="name">Partner 4</span>
      </div>
    </div>
    <div class="info">
      <p>More information about Partner 4...</p>
    </div>
  </div>

  <div class="partner" onclick="toggleInfo(this)">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/200x300" alt="Partner 5">
      <div class="gradient">
        <span class="name">Partner 5</span>
      </div>
    </div>
    <div class="info">
      <p>More information about Partner 5...</p>
    </div>
  </div>

  <div class="partner" onclick="toggleInfo(this)">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/200x300" alt="Partner 6">
      <div class="gradient">
        <span class="name">Partner 6</span>
      </div>
    </div>
    <div class="info">
      <p>More information about Partner 6...</p>
    </div>
  </div>

  <div class="partner" onclick="toggleInfo(this)">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/200x300" alt="Partner 7">
      <div class="gradient">
        <span class="name">Partner 7</span>
      </div>
    </div>
    <div class="info">
      <p>More information about Partner 7...</p>
    </div>
  </div>

  <div class="partner" onclick="toggleInfo(this)">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/200x300" alt="Partner 8">
      <div class="gradient">
        <span class="name">Partner 8</span>
      </div>
    </div>
    <div class="info">
      <p>More information about Partner 8...</p>
    </div>
  </div>
</div>