.modal-overlay .modal > div {
  border: none;
  width: 100%;
  height: 100%;
  text-align: center;
}

.modal-overlay .modal > div img {
  max-height: 100%;
  max-width: 100%;
  border: 0.15rem solid goldenrod;
  /* display: flex; */
}

.modal-overlay .images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.modal-overlay .close {
  background-color: crimson;
  color: white;
  font-size: 28px;
  padding: 0.5em 0.75em;
  position: absolute;
  right: 0;
  text-align: center;
  text-decoration: none;
  top: 0;
  z-index: 1;
}

.modal-overlay h1 {
  color: crimson;
  text-shadow: 4px 4px rgba(44, 122, 171, 0.35);
  margin: 0;
  font-size: 2.5rem;
}

.modal-overlay h2 {
  color: white;
  margin: 0 0 1em;
}

audio {
  width: 100%;
  display: block;
  margin: 1em 0;
}

.modal {
  background-color: rgba(253, 206, 140, 0.9);
  background-image: url("../img/modal-bg-02.jpg");
  background-size: cover;
}

audio::-webkit-media-controls-panel {
  background-color: rgba(253, 206, 140, 0.9);
}