.u-section-1 {
  background-position: 50% 50%, 50% 50%;
  background-repeat: no-repeat, no-repeat;
  background-image: url('images/fonfo\ pepepe.jpg'), linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
  background-size: cover, cover;
}

.u-section-1 .u-sheet-1 {
  min-height: 400px;
}

.tio-abuelo{
  display: grid;
  grid-template-columns: repeat(1,1fr);
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-column: 1/2;
  grid-row: 1/1;
  width: 100%;
  height: 100%;
  gap: 10px;
  position: relative;
  background-color: black;
  color: white;
  border-radius: 10px;
  border: solid white 5px;
}

.tio-abuelo:hover{
  background-color: rgb(22, 22, 22);
  color: white;
  border-radius: 10px;
}

.padre{
  position: relative;
}


.hijo1 video,
.hijo1 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  grid-column: 1/2;
  grid-row: 1/4;
  position: absolute;
  transition: 0.3s ease;
  display: block;
  border-radius: 10px;
}

.hijo1 video{
  opacity: 0;
  pointer-events: none;
}

.hijo1:hover video{
  opacity: 1;
}

.hijo2{
  grid-column: 1/2;
  grid-row: 4/4;
  position: relative;
}

.u-section-1{
  height: auto;
}

.multifaker{
  display: grid;
  grid-template-columns: repeat(1,1fr);
  grid-template-rows: repeat(4,1fr);
  grid-column: 2/3;
  grid-row: 1/1;
  width: 100%;
  height: 100%;
  gap: 10px;
  position: relative;
  background-color: black;
  color: white;
  border-radius: 10px;
  border: solid white 5px;
}

.multifaker:hover{
  background-color: rgb(22, 22, 22);
  color: white;
  border-radius: 10px;
}

.hijo3 video,
.hijo3 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  grid-column: 1/2;
  grid-row: 1/4;
  position: absolute;
  transition: 0.3s ease;
  display: block;
  border-radius: 10px;
}

.hijo3 video{
  opacity: 0;
  pointer-events: none;
}

.hijo3:hover video{
  opacity: 1;
}

.hijo4{
  grid-column: 1/2;
  grid-row: 4/4;
  position: relative;
}

.marionetter{
  display: grid;
  grid-template-columns: repeat(1,1fr);
  grid-template-rows: repeat(4,1fr);
  grid-column: 3/4;
  grid-row: 1/1;
  width: 100%;
  height: 100%;
  gap: 10px;
  position: relative;
  background-color: black;
  color: white;
  border-radius: 10px;
  border: solid white 5px;
}

.marionetter:hover{
  background-color: rgb(22, 22, 22);
  color: white;
  border-radius: 10px;
}

.hijo5 video,
.hijo5 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  grid-column: 1/2;
  grid-row: 1/4;
  position: absolute;
  transition: 0.3s ease;
  display: block;
  border-radius: 10px;
}

.hijo5 video{
  opacity: 0;
  pointer-events: none;
}

.hijo5:hover video{
  opacity: 1;
}

.hijo6{
  grid-column: 1/2;
  grid-row: 4/4;
  position: relative;
}

.pookuery{
  display: grid;
  grid-template-columns: repeat(1,1fr);
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-column: 1/2;
  grid-row: 1/1;
  width: 100%;
  height: 100%;
  gap: 10px;
  position: relative;
  background-color: black;
  color: white;
  border-radius: 10px;
  border: solid white 5px;
}

.pookuery:hover{
  background-color: rgb(22, 22, 22);
  color: white;
  border-radius: 10px;
}

.hijo7 video,
.hijo7 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  grid-row: 1/4;
  position: absolute;
  transition: 0.3s ease;
  display: block;
  border-radius: 10px;
}

.hijo7 video{
  opacity: 0;
  pointer-events: none;
}

.hijo7:hover video{
  opacity: 1;
}

.hijo8{
  grid-column: 1/2;
  grid-row: 4/4;
  position: relative;
  height: 1px;
  
}

.principal{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:  repeat(3, 1fr);
  width: 1300px;
  height: 1000px;
  gap: 14px;
  position: relative;
  margin-left: 2%;
  margin-top: 7%;
  margin-bottom: 7%;
}

/* --- Media query para dispositivos móviles --- */
@media (max-width: 768px) {
  .principal {
    grid-template-columns: 1fr; /* Una sola columna para móviles */
    grid-template-rows: auto; /* Las filas se ajustan automáticamente */
    width: 90%; /* Ajusta el ancho para que sea más responsive */
    height: auto;
    margin: 5% auto; /* Centra el contenedor en la página */
    margin-top: 14%;
    margin-bottom: 80%;
    gap: 20px; /* Aumenta el espacio entre videos para móviles */
  }

  .principal .tio-abuelo,
  .principal .multifaker {
    grid-column: auto; /* Permite que los elementos se apilen en una sola columna */
    grid-row: auto;
    width: 100%; /* El ancho ocupa todo el espacio disponible */
  }

  .hijo2{
    font-size: 14px;
  }

  /*
  Puedes agregar más estilos para mejorar la experiencia móvil si lo necesitas.
  Por ejemplo, ajustar el tamaño de fuente o los márgenes.
  */
}

/* Estilos para tablets */
@media (min-width: 769px) and (max-width: 1024px) {
  .principal {
    width: 95%; /* Reduce el ancho para que ocupe casi toda la pantalla */
    height: 50%;
    margin: 5% auto; /* Centra el contenedor principal */
  }

  .principal,
  .tio-abuelo,
  .multifaker {
    gap: 20px; /* Ajusta el espacio entre los videos para tablets */
    margin-top: 10%;
    margin-bottom: 30%;
  }

    .u-sheet-1{
    height: 100px;
  }
}