.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-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));gap: 10px; }


   @media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }



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