* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: Arial, Helvetica, sans-serif;
}

.layerText {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.layerText::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.705);
}

.layerText img {
  position: relative;
  z-index: 11;
  width: 40%;
}

.wall {
  width: 100vw;
  height: 100vh;

  display: grid;

  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(9, 1fr);

  gap: 0;

  background: #000;
}

.photo {
  position: relative;

  overflow: hidden;

  background: #111;

  animation: show 1s ease;
}

.photo img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  transition:
    transform 8s ease,
    filter 1s ease;

  transform: scale(1.05);
}

/* Zoom cinematográfico */

.photo:hover img {
  transform: scale(1.12);
}

/* Overlay elegante */

.photo::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.25), transparent 40%);

  pointer-events: none;
}

/* Fade */

@keyframes show {
  from {
    opacity: 0;
    transform: scale(0.97);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.wall.fade {
  animation: fadeWall 1s ease;
}

@keyframes fadeWall {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .wall {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(12, 1fr);
  }
}