Last cc

OgestanPre/contenido/05.html

@@ -31,6 +31,32 @@
     display: none;
   }
 
+  .grid-competidores {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+    justify-items: center;
+    margin-top: 12px;
+  }
+
+  .grid-competidores img {
+    max-width: 100%;
+    max-height: 200px;
+    object-fit: contain;
+  }
+
+  @media (max-width: 767px) {
+    .grid-competidores {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  @media (max-width: 480px) {
+    .grid-competidores {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
   @media(min-width: 991px) {
     .shadow-vx {
       max-width: 76%;
@@ -44,6 +70,15 @@
         <div class='row justify-content-center'>
           <div class="col-12 mb-3 text-center apa0 animate__animated animate__fadeInDown">
             <h2 class="fw-bold text-blue-1">Competidores</h2>
+            <div class="grid-competidores">
+              <img src="img/05.0.png" class="img-fluid">
+              <img src="img/05.1.png" class="img-fluid">
+              <img src="img/05.2.png" class="img-fluid">
+              <img src="img/05.3.png" class="img-fluid">
+              <img src="img/05.4.png" class="img-fluid">
+              <img src="img/05.5.png" class="img-fluid">
+              <img src="img/05.6.png" class="img-fluid">
+            </div>
           </div>
           <div class="col-12 apa1 animate__animated animate__zoomIn">
             <div class="d-flex flex-wrap flex-md-row justify-content-center align-items-center gap-2">
@@ -215,7 +250,7 @@
                           <div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
                             <h3 class="fw-medium text-purple-1">Nocele</h3>
                             <ul class="mb-0 bul1">
-                              <li>Solo tiene <strong class="text-secondary">ácido folico</strong></li>
+                              <li>Solo tiene <strong class="text-secondary">ácido folico</strong> (su fórmula está basada únicamente en L-metilfolato)</li>
                               <!-- <li>Basado principalmente en <strong class="text-secondary">ácido fólico y
                                   nutrimentos básicos</strong>.</li> -->
                               <!-- <li>Su fórmula es <strong class="text-secondary">limitada para cubrir
@@ -284,6 +319,7 @@
     });
 
     audiom17.on('end', function () {
+      $('.grid-competidores').hide();
       $('.apa1').show();
       CourseNav.audioController.stopAllSoundsAndPlay(audios[0]);
     });