h1 {
  margin-block: 1em;
}

.gallery-images {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-block: 2rem;
}

.imgButton {
  display: grid;
  place-items: center;
  border-radius: 10px;
  overflow: hidden;
  max-width: min(12rem, 100%);

  background: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
}

.imgButton img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: top;

  transition: 350ms ease-out;
}

.imgButton:is(:hover, :focus):is(:hover, :focus) img {
  scale: 1.1;
}

/* Image Viewer */
.image-viewer {
  display: flex;
  justify-content: center;
  align-items: center;

  background: #33333333;
  backdrop-filter: blur(2rem);
  filter: drop-shadow(0.5em 0.5em 4rem rgb(0, 0, 0));

  position: fixed;
  inset: 0;
  z-index: 222;
}

.image-viewer__img {
  background: transparent;
  padding: 1em;

  min-width: 300px;
  height: 100%;
  object-fit: contain;

  display: flex;
  align-items: center;
}

.image-viewer__img img {
  border-radius: 1.5rem;
  width: 100%;
  max-height: 100%;
}

/* Image Navigation Buttons */
.image-navigation-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1em;
  width: min(100%, 1440px);

  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.btn {
  border: 0;
  outline: 0;
  background: transparent;
  border-radius: 10px;
  font-size: 2rem;
  color: var(--text-color);
  width: 1em;
  height: 1em;
  cursor: pointer;
  z-index: 10;
}

/* Image Viewer's Exit Button */
.image-viewer > button {
  position: absolute;
  right: 1em;
  top: 1em;
}

.image-viewer button:is(:hover, :focus) {
  color: white;
}