.container 
{ border: 2px solid #333; 
    margin: 20px; 
    padding: 10px; 
}
.item {
     background-color: #f0f0f0; 
     border: 1px solid #ccc; 
     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-witdh: 600px){
    .flexbox {
        flex-direction: column; /* Cambiar a columna en pantallas*/
    }
}

.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 */ 
    } 
}

form{
    display: flex;
    flex-direction: column;
}