.container {
       width: 90%;
       margin: 20px auto;
   }

   .card-container {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
   }

   .card {
       background-color: #fff;
       padding: 20px;
       margin: 15px 10px;
       width: 22%;
       border-radius: 8px;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s ease, box-shadow 0.3s ease;
       text-align: center;
   }

   .card:hover {
       transform: translateY(-10px);
       box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
   }

   .card img {
       border-radius: 50%;
       width: 80px;
       height: 80px;
       margin-bottom: 20px;
       border: 3px solid #4CAF50;
   }

   .card h3 {
       font-size: 1.2em;
       color: #4CAF50;
       margin-bottom: 10px;
   }

   .card p {
       font-size: 0.95em;
       line-height: 1.5;
       color: #555;
       height: 100px;
       /* Limita la altura del comentario */
       overflow: hidden;
       text-overflow: ellipsis;
       transition: height 0.3s ease;
   }

   .card span {
       font-style: italic;
       color: #777;
   }

   .read-more {
       display: inline-block;
       font-size: 0.9em;
       color: #00BFFF;
       margin-top: 10px;
       cursor: pointer;
       text-decoration: underline;
   }

   /* Estilo para el contenedor de tarjetas */
   .card-container {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
   }

   /* Asegurarse de que las tarjetas no se superpongan en pantallas pequeñas */
   @media (max-width: 768px) {
       .card {
           width: 48%;
       }
   }

   @media (max-width: 480px) {
       .card {
           width: 100%;
       }
   }