Açılır resmin içerisine yerleştirdiğim divler tıklanmıyor

<div class="city-info">
     
<section class="Grid">
  <div class="Grid-row"><a class="Card" onClick="openGallery(1)" id="card-1">
      <div class="Card-thumb">
        <div class="Card-shadow"></div>
        <div class="Card-shadow"></div>
        <div class="Card-shadow"></div>
        <div class="Card-image" style="background-image: url(https://robohash.org/1)"></div>
      </div>
      <div class="Card-title"><span>Super interesting card</span></div>
      <div class="Card-explore"><span>Explore 50 more</span></div>
      <button class="Card-button">view more</button></a><a class="Card" onClick="openGallery(2)" id="card-2">
      <div class="Card-thumb">
        <div class="Card-shadow"></div>
        <div class="Card-shadow"></div>
        <div class="Card-shadow"></div>
        <div class="Card-image" style="background-image: url(https://robohash.org/2)"></div>
      </div>

.slide .content .city-info {
  z-index: 0;
  position: absolute;
  bottom: 30px;
  right: 30px;
  padding: 30px 30px 30px 120px;
  font-size: 1.25em;
  color: white;
  text-shadow: 0 1px 4px #0f0f0f;
  background-image: -webkit-linear-gradient(left, rgba(20, 20, 20, 0), rgba(20, 20, 20, 0.7));
  background-image: linear-gradient(90deg, rgba(20, 20, 20, 0), rgba(20, 20, 20, 0.7));
  opacity: 0;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}
.slide .content .city-info li {
  position: relative;
  margin-bottom: 5px;
  text-align: justify;
  opacity: 0;
  -webkit-transform: translateX(-30px);
          transform: translateX(-30px);
  -webkit-transition: all 0.75s ease-in-out;
  transition: all 0.75s ease-in-out;
}