.box:hover{
    background-color: #c40d62;
  }

.galery{
  display:grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(10,200px);
  grid-gap: 15px;
    
}
.galery img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    cursor:pointer;
    border-radius: 8px; 
}

.galery img:hover {
    opacity: 1; /* Recupera la opacidad completa al pasar el cursor */
}

@media (min-width: 600px){
    .galery{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(10,200px);
    }
    img:nth-child(1){
        grid-row:span 1;
    }
    img:nth-child(3){
        grid-column:span 1;
    }
    img:nth-child(4){
    grid-row:span 1;
    }
    img:nth-child(8){
        grid-column:span 1;
    }
}

@media (min-width: 760px){
  .galery{
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(10,200px);
  grid-auto-flow: dense;
}
  img:nth-child(5n){
    grid-column:span 2;
  }
  img:nth-child(7n +1){
    grid-row:span 2;
  }
}
    

#prevButton, #nextButton {
    background-color: rgba(0, 0, 0, 0.7); /* Fondo semi-transparente */
    color: white;
    width: 50px;
    height: 150px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10; /* Asegura que esté sobre la imagen */
    opacity: .5;

}

#prevButton:hover, #nextButton:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-body img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
#modalImage{
    border-radius: 8px; 
}



@media (max-width: 768px) {
    /* Tus estilos para celular aquí */
    .galery img {
        opacity: 1;
    }
}