/*  ESTILOS DE LA GALERIA  */

.contenedor-galeria {
    font-family: var(--textos);
    width: 100%;
    /* max-width: var(--ancho-max); */
    margin: 15px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    padding: 0;
    grid-gap: 10px;
}

.galeria__item {
    position: relative;
}

.galeria__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.galeria__title {
    position: absolute;
    bottom: 0;
    padding: 10px;
    color: var(--color4);
    background: linear-gradient(rgba(255,255,255,.0), rgba(0,0,0,1));
    width: 100%;
    font-weight: 300;
}

.galeria__item:nth-child(1) {
    grid-column-start: span 2;
}
.galeria__item:nth-child(4) {
    grid-column-start: span 2;
}
.galeria__item:nth-child(5) {
    grid-column-start: span 1;
}
.galeria__item:nth-child(6) {
    grid-column-start: span 2;
    grid-row-start: span 2;
}
.galeria__item:nth-child(8) {
    grid-column-start: span 2;
    grid-row-start: span 2;
}
.galeria__item:nth-child(11) {
    grid-column-start: span 3;
}
.galeria__item:nth-child(13) {
    grid-column-start: span 2;
}
.galeria__item:nth-child(14) {
    grid-column-start: span 2;
}
.galeria__item:nth-child(17) {
    grid-column-start: span 2;
}
.galeria__item:nth-child(18) {
    grid-column-start: span 2;
}
.galeria__item:nth-child(21) {
    grid-column-start: span 2;
}


/*  DESDE  */
@media (min-width:768px) {
    .contenedor-galeria {
        grid-template-columns: repeat(4, 1fr);
}
   .galeria__item:nth-child(1) {
        grid-column-start: span 2;
         grid-row-start: span 2;
} 
   .galeria__item:nth-child(4) {
        grid-column-start: span 1;
}
   .galeria__item:nth-child(6) {
        grid-column-start: span 1;
        grid-row-start: span 1;
} 
    .galeria__item:nth-child(7) {
        grid-column-start: span 2;
}
    .galeria__item:nth-child(8) {
        grid-column-start: span 1;
        grid-row-start: span 2;
}
    .galeria__item:nth-child(11) {
        grid-column-start: span 1;
}
.galeria__item:nth-child(12) {
    grid-column-start: span 2;
}
.galeria__item:nth-child(13) {
    grid-column-start: span 2;
}
.galeria__item:nth-child(14) {
    grid-column-start: span 1;
}

.galeria__item:nth-child(15) {
    grid-column-start: span 2;
}
.galeria__item:nth-child(16) {
    grid-column-start: span 1;
}
.galeria__item:nth-child(17) {
    grid-column-start: span 1;
}
.galeria__item:nth-child(18) {
    grid-column-start: span 2;
    grid-row-start: span 2;
}
.galeria__item:nth-child(21) {
    grid-column-start: span 1;
}
}