Arreglados bugs visuales del carousel y de el botón de volver a la tienda de el grid-productos

src/app/homepage/homepage.component.html

@@ -3,12 +3,13 @@
     <div class="container ps-5">
       <div class="row">
         <div class="col-12 flex-column">
-          <h1 class="text-white mt-5 mb-5">Chocorrezno vegano</h1>
+          <h1 class="text-white mt-5 mb-5">Chocorrezno</h1>
           <h2 class="text-white mb-5">
             Un sabor que sorprende a los más exquisitos
           </h2>
           <button
             class="fw-bold fs-5 mb-5 btn btn-primary bg-fucsia border-0 d-flex align-items-center justify-content-center"
+            routerLink="/tienda/producto/Dpca8fzHnjrO5x6AOFrl"
           >
             Comprar
           </button>
@@ -22,13 +23,14 @@
     <div class="container ps-5">
       <div class="row">
         <div class="col-12">
-          <h1 class="text-white mt-5 mb-5">Chocolate vegano 85% cacao</h1>
+          <h1 class="text-white mt-5 mb-5">Chocolate vegano 100% cacao</h1>
           <h2 class="text-white mb-5">
             Nuestra forma más saludable de darse un capricho
           </h2>
           <div class="row">
             <div class="col-12 text-end">
               <button
+                routerLink="/tienda/producto/ZoJ8AOtOyAZD9lLUutRJ"
                 class="fw-bold fs-5 mb-5 btn btn-primary bg-fucsia border-0 d-flex align-items-center justify-content-center"
               >
                 Comprar
@@ -56,7 +58,7 @@
     </div>
   </div>
 </div>
-<div class="container mt-5">
+<div class="container mt-5 mb-5">
   <app-carousel-productos
     [productos]="productosDestacados"
   ></app-carousel-productos>

src/app/tienda/card-producto/card-producto.component.html

-<div
-  class="container rounded-3 border border-dark pt-3 mb-3 h-100"
-  style="width: 18rem"
->
+<div class="container rounded-3 border border-dark pt-3 mb-3 h-100">
   <div class="">
     <a [routerLink]="['/tienda/producto', producto.productoID]">
       <div class="row d-flex justify-content-center">

src/app/tienda/carousel-productos/carousel-productos.component.ts

@@ -7,7 +7,28 @@ import { Producto } from 'src/app/shared/clases/producto';
   styleUrls: ['./carousel-productos.component.css'],
 })
 export class CarouselProductosComponent implements OnInit {
-  responsiveOptions;
+  responsiveOptions = [
+    {
+      breakpoint: '3000px',
+      numVisible: 4,
+      numScroll: 1,
+    },
+    {
+      breakpoint: '1024px',
+      numVisible: 1,
+      numScroll: 1,
+    },
+    {
+      breakpoint: '768px',
+      numVisible: 1,
+      numScroll: 1,
+    },
+    {
+      breakpoint: '560px',
+      numVisible: 1,
+      numScroll: 1,
+    },
+  ];
   @Input('productos') productos: Producto[];
 
   constructor() {}

src/app/tienda/grid-productos/grid-productos.component.html

@@ -7,11 +7,12 @@
 </div>
 <div class="container">
   <div class="row">
-    <div *ngFor="let p of productos" class="col-md-6 col-sm-12 col-lg-4 mb-3">
+    <div *ngFor="let p of productos" class="col-md-6 col-sm-12 col-lg-4 mb-4">
       <app-card-producto [producto]="p"></app-card-producto>
     </div>
   </div>
-  <div class="row" *ngIf="mostrarBotonVolver">
+  <div class="row mb-5" *ngIf="mostrarBotonVolver">
+    <div class="col d-flex justify-content-center">
       <a
         routerLink="/tienda/tienda"
         class="btn btn-primary bg-fucsia border-white"
@@ -20,3 +21,4 @@
       >
     </div>
   </div>
+</div>