body {
  margin: 0;
  background-color: #fff;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

/* GRID BASE */
#wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  width: 100vw;
}

/* TEXTO GLITCH */
.phrase {
  font-size: 9vh;
  line-height: 1;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
  position: relative;
  animation: glitch 2s infinite;
  color: black;
}

/* ✅ RESPONSIVE BREAKPOINTS */

/* Tablets (pantallas medianas) */
@media (max-width: 1024px) {
  #wall {
    grid-template-columns: repeat(2, 1fr);
  }

  .phrase {
    font-size: 8vh;
  }
}

/* Móviles grandes */
@media (max-width: 768px) {
  #wall {
    grid-template-columns: repeat(1, 1fr);
  }

  .phrase {
    font-size: 10vw; /* Escala mejor en móviles */
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .phrase {
    font-size: 12vw;
  }
}

/* ✅ GLITCH EFFECT */
@keyframes glitch {
  0% { transform: translate(0); color: black; }
  10% { transform: translate(-2px, 2px); color: red; }
  20% { transform: translate(2px, -2px); color: blue; }
  30% { transform: translate(-1px, 1px); color: green; }
  40% { transform: translate(1px, -1px); color: magenta; }
  50% { transform: translate(0); color: black; }
  100% { transform: translate(0); color: black; }
}