feat(carousel): enhance carousel layout and control positioning for improved responsiveness

src/app/shared/components/carousel/carousel.component.scss

@@ -8,11 +8,23 @@
 
   &__frame {
     position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: center;
     width: 100%;
     margin-inline: auto;
+
+    &--with-controls {
+      grid-template-columns: 3rem minmax(0, 1fr) 3rem;
+
+      .carousel__viewport {
+        grid-column: 2;
+      }
+    }
   }
 
   &__viewport {
+    grid-row: 1;
     width: 100%;
     overflow-x: auto;
     overscroll-behavior-inline: contain;
@@ -70,19 +82,25 @@
   }
 
   &__control {
-    position: absolute;
-    top: 50%;
+    grid-row: 1;
+    justify-self: center;
     display: grid;
     width: 2.25rem;
     height: 2.25rem;
     padding: 0;
-    color: #fff;
+    color: var(--color-primary, #6376f3);
     cursor: pointer;
-    background: rgb(0 0 0 / 55%);
+    background: transparent;
     border: 0;
-    border-radius: 50%;
     place-items: center;
-    transform: translateY(-50%);
+    transition:
+      color 150ms ease,
+      transform 150ms ease;
+
+    &:hover:not(:disabled) {
+      color: color-mix(in srgb, var(--color-primary, #6376f3) 78%, #000);
+      transform: scale(1.12);
+    }
 
     &:disabled {
       cursor: default;
@@ -96,11 +114,11 @@
     }
 
     &--previous {
-      left: 0.5rem;
+      grid-column: 1;
     }
 
     &--next {
-      right: 0.5rem;
+      grid-column: 3;
     }
   }
 }