<!-- Esto es HTML con CSS integrado. Lo pegas todo en un módulo "Código" de Divi -->

<style>
  /* Estilos para que nuestra tarjeta se vea bien */
  .custom-card {
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden; /* Para que la imagen respete los bordes redondeados */
    text-align: left;
    font-family: 'Roboto', sans-serif;
    height: 100%; /* Para que todas las tarjetas en una fila tengan la misma altura */
  }
  .custom-card img {
    width: 100%;
    height: auto;
    display: block;
  }
  .custom-card-content {
    padding: 25px;
  }
  .custom-card-content h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #4A00E0;
    margin-top: 0;
    margin-bottom: 15px;
  }
  .custom-card-content ul {
    list-style: none;
    padding-left: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #333333;
  }
  .custom-card-content li {
    margin-bottom: 10px;
  }
</style>

<!-- Estructura HTML de la tarjeta del curso -->
<div class="custom-card">
  <img src="https://images.pexels.com/photos/8386440/pexels-photo-8386440.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Fundamentos de Inteligencia Artificial">
  <div class="custom-card-content">
    <h4>Curso 1: IA: Fundamentos para Educadores</h4>
    <ul>
      <li><strong>Objetivo:</strong> Desmitificar la IA y proporcionar una base sólida sobre sus conceptos clave.</li>
      <li><strong>Duración:</strong> 4 semanas</li>
      <li><strong>Modalidad:</strong> 100% Online Asincrónico</li>
    </ul>
  </div>
</div>