.grid-container{
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
    grid-gap: 24px; 
    max-width: 100%; 
    margin: 0 auto;
}

.grid-item{
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    border: 1px solid #ccc; 
    padding: 10px; 
    border-radius: 12px;
}

@media (min-width: 601px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* Mantiene siempre máximo 2 columnas en pantallas medianas y grandes */
    }
}