/*--------------------------
    GRID GALERIA INICIO
---------------------------*/

.grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    position:relative;
  
    background-color: #dfdfdf;
    transition: all 0.3s ease-in-out;
  
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
  }
  
  .grid-item h3{
      font-weight:500;text-shadow: 5px 2px 10px #242424c6;
  }

  .grid-item:hover {
    transition: all 0.3s ease-in-out;
    /*opacity:0.5;*/
  }
  
  
  .grid-container {
    max-width:1550px;margin:auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: minmax(300px, auto);
    gap: 20px;
    padding: 20px;
    grid-auto-flow:dense;
  }
  
  .pgrid-bonbonpetit{
    font-size: 1rem;
    text-align:center;
    display:flex;width:100%;height:100%;
    padding:10px;
    justify-content:center;
    color:#fff;
    position:absolute;align-items: flex-end;
    z-index:1; transition: all 0.4s ease-in-out;
  }
  
  
  .grid-item:hover .pgrid-bonbonpetit{
    font-size:1.2rem; transition: all 0.4s ease-in-out;
    background-color: black;
  }
  

  .grid-item:hover .pgrid-bonbonpetit{
  font-size:1.2rem; transition: all 0.4s ease-in-out;
  background-color:rgba(1, 1, 1, 0.55);
}


.grid-item{border-radius:0;}
.grid-item:hover{transform: scale(1.0)}
.pgrid-bonbonpetit{transition: all ease 2s;opacity:0;display:flex;justify-content:center;align-items:center;}
.grid-item:hover .pgrid-bonbonpetit{background-color:rgba(1, 1, 1, 0.55);opacity:1;}
.lg-outer .lg-thumb-outer{background-color:var(--blanco)!important;}
.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover{border-color:rgba(1, 1, 1, 0.55) !important;}
.lg-progress-bar .lg-progress{background-color: rgba(1, 1, 1, 0.55) !important;}
.lg-actions .lg-next, .lg-actions .lg-prev{background-color:rgba(1, 1, 1, 0.55) !important;}


    /*Borrar para usar un ancho igual en la galeria*/
   
    .ancho {
      grid-column: span 2;
    }
  
    .alto {
      grid-row: span 2;
      grid-column: span 1;
    }

 /* Hasta aquí borrar para usar un ancho igual en la galeria*/