How can I fix the issue with closing my lightbox modal window in HTML and CSS?

I just created a lightbox modal for displaying images. When an image is clicked, a modal window appears with navigation buttons to switch between images. However, there is currently an issue with closing the modal window by clicking on the blank area. It seems that the z-index values of the elements are causing conflicts, despite my attempts to assign different values to them. I would greatly appreciate your assistance in resolving this matter. Thank you.

<style>
/* Mobile Styles */
  @media (max-width: 767px){
    .mySlides img {
      width: 100%;
    }
  }
  
  /* Desktop Styles */
  @media (min-width: 768px) {
    .mySlides img {
      width: 70%;
    }
}
.mySlides img{margin: 0 auto;
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;}
.mySlides{height: 100vh;}
  
.background-image {
  position: fixed;
z-index: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-attachment: fixed;
  cursor: pointer;
}
* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: auto;
  padding-top: 10px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* overflow: auto; */
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  /*background-color: #fefefe;*/
  margin: auto;
  padding: 0;
  width: 100%;
  /* max-width: 1200px; */
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
text-align: center; /* Center the image within the container */
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
z-index: auto;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

img {
  margin-bottom: -4px;
}
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.grid { 
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  align-items: stretch;
  justify-items: center;
padding: 20px;
  }
.grid img {
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  max-width: 100%;
}
</style>

<div  class="parent-cont">
<main class="grid">
  <img onclick="openModal();currentSlide(1)" src="https://only4gamers.net/wp-content/uploads/2023/05/New-2.png" alt="Sample photo">
  <img onclick="openModal();currentSlide(2)" src="https://only4gamers.net/wp-content/uploads/2023/05/New-3.png" alt="Sample photo">
  <img onclick="openModal();currentSlide(3)" src="https://only4gamers.net/wp-content/uploads/2023/05/New-13.png" alt="Sample photo">
  <img onclick="openModal();currentSlide(4)" src="https://only4gamers.net/wp-content/uploads/2023/05/New-12.png" alt="Sample photo">
</main>



</div>
</div>

<div id="myModal" class="modal">
  <img src="https://only4gamers.net/wp-content/uploads/2023/05/Transparent-1-pixel.png" class="background-image" onclick="closeModal()">
  <div class="modal-content">

    <div class="mySlides">
      <img style="z-index: auto;" src="https://only4gamers.net/wp-content/uploads/2023/05/New-2.png">
    </div>

    <div class="mySlides">
      <img style="z-index: auto;" src="https://only4gamers.net/wp-content/uploads/2023/05/New-3.png">
    </div>

    <div class="mySlides">
      <img style="z-index: auto;" src="https://only4gamers.net/wp-content/uploads/2023/05/New-13.png">
    </div>
    
    <div class="mySlides">
      <img style="z-index: auto;" src="https://only4gamers.net/wp-content/uploads/2023/05/New-12.png">
    </div>
    
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
</div>

https://codepen.io/Only4Gamers/pen/PoyXojW