.container { 
    border: 2px solid #333; 
    margin: 20px; padding: 10px; 
}

.item { 
     background-color: #f0f0f0;
     border: 1px solid #ccc; 
     padding: 20px; text-align: center; 
}
.item2 { background-color: #38e9cb;
    display: grid;  
     border: 1px solid #38e9cb; 
     padding: 20px; text-align: center; 
}
.item4 { background-color: burlywood; 
    border: 1px solid #000000; 
    padding: 20px; text-align: center; 
}
.flexbox { 
    display: flex; 
    flex-wrap: wrap;/* Permitir que los elementos se envuelvan */
}

.item { 
    flex: 1 1 200px; /* Permitir que los elementos crezcan y se encojan */
}

@media (max-width: 600px) {
    .flexbox { flex-direction: column; /* Cambiar a columna en pantallas pequeñas */ }
}

.grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Crear columnas flexibles */
    gap: 10px; /* Espacio entre elementos */    
}


@media (max-width: 600px) { 
    .grid { 
        grid-template-columns: 1fr; /* Una sola columna en pantallas pequeñas */
    } 
}