.grid{
    display: grid;
    position: relative;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Ajusta el número de columnas automáticamente */
    grid-auto-rows: 1fr; /* Ajusta las filas automáticamente */
    gap: 20px; /* Espacio entre los divs */
    margin-left: auto !important; /* Centrado */
    margin-right: auto !important; /* Centrado */
    width: auto;
    max-width: 100%;
}

@media (max-width: 979px) {
    .grid{
        display: flex;
        flex-direction: column;
    }
}

.grid .row-container{
    grid-column: 1 / -1; /* Abarca toda la fila */
    display: flex; /* Usar flexbox para centrar */
    justify-content: center; /* Centrar los elementos horizontalmente */
    flex-wrap: wrap; /* Permitir que los elementos bajen si no caben */
    gap: 20px; /* Espaciado entre elementos */
}

@media (max-width: 979px) {
    .grid .row-container{
        flex-direction: column;
    }
}

.grid.grid3{
    grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
}

.grid.grid4{
    grid-template-columns: repeat(4, 1fr); /* 4 columnas iguales */
}

@media (max-width: 1300px) {
    .grid.grid4{
        grid-template-columns: repeat(2, 1fr); /* 2 columnas iguales */
        
    }
}


.grid.grid3x2{
    grid-template-columns: repeat(6, 1fr); /* 3 columnas iguales */
    gap: 20px; /* Espacio entre los divs */
    margin-left: auto; /* Centrado */
    margin-right: auto; /* Centrado */
}

/* Primeros tres elementos (fila 1) */
.grid3x2 > div:nth-child(1) {
    grid-column: 1 / 3; /* Columna 1 */
}

.grid3x2 > div:nth-child(2) {
    grid-column: 3 / 5; /* Columna 3 */
}

.grid3x2 > div:nth-child(3) {
    grid-column: 5 / 7; /* Columna 5 */
}

/* Cuarto y quinto elemento con solapamiento horizontal */
.grid3x2 > div:nth-child(4) {
    grid-column: 2 / 4; /* Desde la columna 2 hasta la 4 */
}

.grid3x2 > div:nth-child(5) {
    grid-column: 4 / 6; /* Desde la columna 3 hasta la 5 */
}