diff --git a/src/components/carousel/carousel.component.ts b/src/components/carousel/carousel.component.ts
index 778c081e..24db6f31 100644
--- a/src/components/carousel/carousel.component.ts
+++ b/src/components/carousel/carousel.component.ts
@@ -507,11 +507,11 @@ export default class SlCarousel extends ShoelaceElement {
           id="scroll-container"
           part="scroll-container"
           class="${classMap({
-      carousel__slides: true,
-      'carousel__slides--horizontal': this.orientation === 'horizontal',
-      'carousel__slides--vertical': this.orientation === 'vertical',
-      'carousel__slides--dragging': this.dragging
-    })}"
+            carousel__slides: true,
+            'carousel__slides--horizontal': this.orientation === 'horizontal',
+            'carousel__slides--vertical': this.orientation === 'vertical',
+            'carousel__slides--dragging': this.dragging
+          })}"
           style="--slides-per-page: ${this.slidesPerPage};"
           aria-busy="${scrolling ? 'true' : 'false'}"
           aria-atomic="true"
@@ -525,15 +525,15 @@ export default class SlCarousel extends ShoelaceElement {
         </div>
 
         ${this.navigation
-        ? html`
+          ? html`
               <div part="navigation" class="carousel__navigation">
                 <button
                   part="navigation-button navigation-button--previous"
                   class="${classMap({
-          'carousel__navigation-button': true,
-          'carousel__navigation-button--previous': true,
-          'carousel__navigation-button--disabled': !prevEnabled
-        })}"
+                    'carousel__navigation-button': true,
+                    'carousel__navigation-button--previous': true,
+                    'carousel__navigation-button--disabled': !prevEnabled
+                  })}"
                   aria-label="${this.localize.term('previousSlide')}"
                   aria-controls="scroll-container"
                   aria-disabled="${prevEnabled ? 'false' : 'true'}"
@@ -547,10 +547,10 @@ export default class SlCarousel extends ShoelaceElement {
                 <button
                   part="navigation-button navigation-button--next"
                   class=${classMap({
-          'carousel__navigation-button': true,
-          'carousel__navigation-button--next': true,
-          'carousel__navigation-button--disabled': !nextEnabled
-        })}
+                    'carousel__navigation-button': true,
+                    'carousel__navigation-button--next': true,
+                    'carousel__navigation-button--disabled': !nextEnabled
+                  })}
                   aria-label="${this.localize.term('nextSlide')}"
                   aria-controls="scroll-container"
                   aria-disabled="${nextEnabled ? 'false' : 'true'}"
@@ -562,21 +562,27 @@ export default class SlCarousel extends ShoelaceElement {
                 </button>
               </div>
             `
-        : ''}
+          : ''}
         ${this.pagination
-        ? html`
-              <div part="pagination" role="tablist" class="carousel__pagination" aria-controls="scroll-container" style="${styleMap({
-          '--pages': pagesCount
-        })}">
+          ? html`
+              <div
+                part="pagination"
+                role="tablist"
+                class="carousel__pagination"
+                aria-controls="scroll-container"
+                style="${styleMap({
+                  '--pages': pagesCount
+                })}"
+              >
                 ${map(range(pagesCount), index => {
-          const isActive = index === currentPage;
-          return html`
+                  const isActive = index === currentPage;
+                  return html`
                     <button
                       part="pagination-item ${isActive ? 'pagination-item--active' : ''}"
                       class="carousel__pagination-item"
                       style="${styleMap({
-            '--index': index
-          })}"
+                        '--index': index
+                      })}"
                       role="tab"
                       aria-selected="${isActive ? 'true' : 'false'}"
                       aria-label="${this.localize.term('goToSlide', index + 1, pagesCount)}"
@@ -585,10 +591,10 @@ export default class SlCarousel extends ShoelaceElement {
                       @keydown=${this.handleKeyDown}
                     ></button>
                   `;
-        })}
+                })}
               </div>
             `
-        : ''}
+          : ''}
       </div>
     `;
   }
diff --git a/src/components/carousel/carousel.styles.ts b/src/components/carousel/carousel.styles.ts
index f5778eea..9cf1ade3 100644
--- a/src/components/carousel/carousel.styles.ts
+++ b/src/components/carousel/carousel.styles.ts
@@ -152,11 +152,10 @@ export default css`
 
   @supports (animation-timeline: view()) {
     .carousel__pagination-item {
-        animation: pagination-item-active linear;
-        animation-timeline: --carousel;
-        animation-range: 
-          calc(var(--index) * calc(100% / var(--pages))) 
-          calc((var(--index) + 1) * calc(100% / var(--pages) + 1px));
+      animation: pagination-item-active linear;
+      animation-timeline: --carousel;
+      animation-range: calc(var(--index) * calc(100% / var(--pages)))
+        calc((var(--index) + 1) * calc(100% / var(--pages) + 1px));
     }
   }