#myModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  backdrop-filter: blur(20px);
  width: 100%;
  height: 100%;
  padding: 30px;
  place-content: center;
  box-sizing: border-box;
  background-color: #e8e8e880;
}

@media screen and (min-width: 375px) and (max-width: 600px) {
  #myModal {
    padding: 50px;
    top: 25px;
    backdrop-filter: blur(200px);
    background-color: #00000080;
  }
}

#myModal.open {
  display: grid;
}

.prev,
.next,
.close {
  position: absolute;
  cursor: pointer;
  color: rgb(125, 125, 125);
  /* background-color: #000; */
  font-size: 50px;
}

@media screen and (min-width: 375px) and (max-width: 600px) {
  .prev,
  .next,
  .close {
    position: absolute;
    cursor: pointer;
    color: rgb(255, 255, 255);
    font-size: 75px;
  }
}

.close {
  top: 80px;
  right: 10px;
}

.prev,
.next {
  top: 60%;
  transform: translateY(-100%);
}

@media screen and (min-width: 375px) and (max-width: 600px) {
  .next {
    right: 0px;
  }
}
@media screen and (min-width: 375px) and (max-width: 600px) {
  .prev {
    left: 0px;
  }
}
@media screen and (min-width: 990px) {
  .next {
    right: 0px;
  }
}
@media screen and (min-width: 990px) {
  .prev {
    left: 350px;
  }
}

@media screen and (min-width: 600px) and (max-width: 980px) {
  .next {
    right: 0px;
  }
}
@media screen and (min-width: 600px) and (max-width: 980px) {
  .prev {
    left: 0px;
  }
}