feat(carousel): enhance carousel component with gap support and layout adjustments

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

@@ -1,40 +1,43 @@
 <section class="carousel" role="region" [attr.aria-label]="ariaLabel()">
-  <div
-    #viewport
-    class="carousel__viewport"
-    tabindex="0"
-    (scroll)="handleScroll()"
-    (keydown)="handleKeydown($event)"
-  >
-    @for (item of items(); track trackBy()($index, item); let index = $index) {
-      <div class="carousel__item">
-        <ng-container
-          [ngTemplateOutlet]="itemTemplate()"
-          [ngTemplateOutletContext]="{ $implicit: item, index }"
-        />
-      </div>
+  <div class="carousel__frame" [style.width.px]="viewportWidth()">
+    <div
+      #viewport
+      class="carousel__viewport"
+      tabindex="0"
+      [style.gap.px]="resolvedGap()"
+      (scroll)="handleScroll()"
+      (keydown)="handleKeydown($event)"
+    >
+      @for (item of items(); track trackBy()($index, item); let index = $index) {
+        <div class="carousel__item">
+          <ng-container
+            [ngTemplateOutlet]="itemTemplate()"
+            [ngTemplateOutletContext]="{ $implicit: item, index }"
+          />
+        </div>
+      }
+    </div>
+
+    @if (hasMultipleItems()) {
+      <button
+        type="button"
+        class="carousel__control carousel__control--previous"
+        [disabled]="!canScrollPrevious()"
+        [attr.aria-label]="previousLabel()"
+        (click)="previous()"
+      >
+        <i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
+      </button>
+
+      <button
+        type="button"
+        class="carousel__control carousel__control--next"
+        [disabled]="!canScrollNext()"
+        [attr.aria-label]="nextLabel()"
+        (click)="next()"
+      >
+        <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
+      </button>
     }
   </div>
-
-  @if (hasMultipleItems()) {
-    <button
-      type="button"
-      class="carousel__control carousel__control--previous"
-      [disabled]="!canScrollPrevious()"
-      [attr.aria-label]="previousLabel()"
-      (click)="previous()"
-    >
-      <i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
-    </button>
-
-    <button
-      type="button"
-      class="carousel__control carousel__control--next"
-      [disabled]="!canScrollNext()"
-      [attr.aria-label]="nextLabel()"
-      (click)="next()"
-    >
-      <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
-    </button>
-  }
 </section>