agregado de slider de próximas entregas

css/styles.css

@@ -94,7 +94,10 @@ nav ul li {
 
 #main-index {
   width: 100%;
-  /* min-height: 100vh; */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .contenedor-index {
@@ -189,7 +192,7 @@ nav ul li {
   background-color: #2c2c2c;
   color: white;
   text-align: center;
-  padding: 1rem 0;
+  padding: 3rem 0;
 }
 
 .linea-lateral {
@@ -221,7 +224,17 @@ nav ul li {
   justify-content: center;
   align-items: center;
   background-color: #2c2c2c;
-  padding: 3rem 1rem;
+  padding-top: 3rem;
+  padding-inline: 1rem;
+}
+
+.galeria-titulo {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 1rem 0;
+  margin-bottom: 3rem;
 }
 
 .mosaico-peliculas {
@@ -239,4 +252,44 @@ nav ul li {
 .card .card-body {
   background-color: #2c2c2c;
   color: white;
+}
+
+.proximos-box {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #2c2c2c;
+}
+
+.proximos-titulo {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 3rem 0;
+}
+
+.proximos-section {
+  width: 100%;
+  display: grid;
+  grid-auto-flow: column;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scrollbar-color: #ff4081 #2c2c2c;
+  padding: 2rem 0;
+  margin-bottom: 2rem;
+}
+
+.proximos-section::-webkit-scrollbar-thumb {
+  border-radius: 2rem !important;    
+}  
+
+.proximos-contenedor {
+  display: flex;
+}
+
+.proximos-contenedor div {
+  margin: 0 1rem;
 }

index.html

@@ -86,6 +86,11 @@ <h2>Clásicos y nuevos también</h2>
 
     <!---- Mosaico de tarjetas ---->
     <section id="galeria">
+      <section class="galeria-titulo">
+        <hr class="linea-lateral">
+        <h2 class="text-center text-white">Tendencias actuales</h2>
+        <hr class="linea-lateral">
+      </section>
       <section class="mosaico-peliculas mosaico-1">
         <div class="card" style="width: 16rem;">
           <img src="assets/images/cards/bleach.jpg" class="card-img-top" alt="...">
@@ -125,9 +130,65 @@ <h2>Clásicos y nuevos también</h2>
         </div>
       </section>
     </section>
-    <!----------------------------->
 
-    <!---- Contenido destacado ---->
+    <!---- Contenido próximo ---->
+
+    <section class="proximos-box">
+      <section class="proximos-titulo">
+        <hr class="linea-lateral">
+          <h2 class="text-center text-white">Próximas entregas</h2>
+        <hr class="linea-lateral">
+      </section>
+      <section class="proximos-section">
+        <section class="proximos-contenedor">
+          <div class="card" style="width: 10rem;">
+            <img src="assets/images/slider/adventure-time.jpg" class="card-img-top" alt="...">
+          </div>
+          <div class="card" style="width: 10rem;">
+            <img src="assets/images/slider/aladin.jpg" class="card-img-top" alt="...">
+          </div>
+          <div class="card" style="width: 10rem;">
+            <img src="assets/images/slider/atlantis.jpg" class="card-img-top" alt="...">
+          </div>
+          <div class="card" style="width: 10rem;">
+            <img src="assets/images/slider/chainsawman.jpg" class="card-img-top" alt="...">
+          </div>
+          <div class="card" style="width: 10rem;">
+            <img src="assets/images/slider/dany-phantom.jpg" class="card-img-top" alt="...">
+          </div>
+          <div class="card" style="width: 10rem;">
+            <img src="assets/images/slider/db-gt.jpg" class="card-img-top" alt="...">
+          </div>
+          <div class="card" style="width: 10rem;">
+            <img src="assets/images/slider/ed-edd-eddy.jpg" class="card-img-top" alt="...">
+          </div>
+          <div class="card" style="width: 10rem;">
+            <img src="assets/images/slider/ninja-turtles.jpg" class="card-img-top" alt="...">
+          </div>
+          <div class="card" style="width: 10rem;">
+            <img src="assets/images/slider/db-kid.jpg" class="card-img-top" alt="...">
+          </div>
+          <div class="card" style="width: 10rem;">
+            <img src="assets/images/slider/one-piece.jpg" class="card-img-top" alt="...">
+          </div>
+          <div class="card" style="width: 10rem;">
+            <img src="assets/images/slider/padrinos-magicos.jpg" class="card-img-top" alt="...">
+          </div>
+          <div class="card" style="width: 10rem;">
+            <img src="assets/images/slider/one-punch-man.jpg" class="card-img-top" alt="...">
+          </div>
+          <div class="card" style="width: 10rem;">
+            <img src="assets/images/slider/shrek-2.jpg" class="card-img-top" alt="...">
+          </div>
+          <div class="card" style="width: 10rem;">
+            <img src="assets/images/slider/toy-story-2.jpg" class="card-img-top" alt="...">
+          </div>
+          <div class="card" style="width: 10rem;">
+            <img src="assets/images/slider/yugioh.jpg" class="card-img-top" alt="...">
+          </div>
+        </section>
+      </section>
+    </section>
 
     <!----------------------------->