 #Container{
    z-index: 999;    
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    overflow: hidden;
    display: none;
  }
  .fatherGa{
    display:flex;
    justify-content:center
  }
  .gallery{
    width:78.8vw;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 0.5rem;
    transition:0.3s ease;
    cursor:pointer;
  }

  .Column1 {
    display:flex;
    flex-direction:column;
    row-gap: 0.1rem;
    width: 100%
  }
  .Column2{
     display:flex;
    flex-direction:column;
    row-gap: 0.1rem
  }
  .Column1 div img{
    object-fit: cover;
  }
  .Column2 div img{
    object-fit: cover;
  }
.first img, .second img, .third img, .fourth img, .MiddleColumn img {
  transition: transform 0.3s ease;
}
.first:hover img,  .second:hover img, .third:hover img, .fourth:hover img, .MiddleColumn img {
  transform: scale(1.07);
}


  .MiddleColumn {
    width:100%;
    height: 98%;
    transition: transform 0.3s ease;
    overflow:hidden
  }
  .MiddleColumn img{
    object-fit: cover;
		height:100%;
  }
  .MiddleColumn:hover{
      transform: scale(1.07);
  }
   #laImg{
    width: 95vw;
    }
    #closed{
    right: 2rem; top: 2rem;
    }
    .controls{
   position: relative;
      z-index: 200;
      top:50%;
        display: flex;
        justify-content: space-between;
        padding: 0rem 10rem 0rem 10rem;
        cursor: pointer;
    }
    .controls svg {
    outline: none; /* Elimina el contorno de enfoque */
    cursor: pointer; /* Cambia el cursor para indicar que es clickeable */
    }
    .controls svg:focus {
    outline: none;
    }
  .Column-mobile{
    display:none
  }
  @media(max-width:446px){
    .gallery{
    display:none
    }
    .gallery-mobile{
      display:flex;
      flex-direction:column;
      row-gap:0.2rem
    }
    .Column-mobile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem;
}

.Column-mobile div {
  display: grid;
  gap: 0.2rem;
}

.Column-mobile div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
	
    }
}