Carousel buttons

src/index.liquid

@@ -47,6 +47,16 @@
 
       <p class="Carousel-text">Made with Eleventy and SCSS.</p>
     </div>
+
+    <button class="Carousel-controls Carousel-controls--left"
+      id="carousel-left">
+      <i class="fa-solid fa-chevron-left" title="Previous item"></i>
+    </button>
+
+    <button class="Carousel-controls Carousel-controls--right"
+      id="carousel-right">
+      <i class="fa-solid fa-chevron-right" title="Next item"></i>
+    </button>
   </main>
 
   <footer class="Footer" id="footer">

src/style/Carousel.css

@@ -6,7 +6,7 @@
     align-items: center;
     margin: auto;
     block-size: 100%;
-    inline-size: 60%;
+    inline-size: 70%;
     text-align: center;
   }
 
@@ -20,4 +20,51 @@
     border-color: var(--c-purple);
     transition: border-color 500ms;
   }
+
+  .Carousel-controls {
+    --Carousel-controls-translateY: -100%;
+
+    font-size: var(--t-step-2);
+    cursor: pointer;
+    background: none;
+    border: none;
+    translate: 0 var(--Carousel-controls-translateY);
+  }
+
+  .Carousel-controls--left {
+    order: -100;
+  }
+
+  .Carousel-controls--right {
+    order: 100;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .Carousel-controls {
+      transition: color 300ms;
+    }
+
+    .Carousel-controls:hover, .Carousel-controls:focus {
+      color: var(--c-purple);
+      transition: color 300ms;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .Carousel-controls {
+      transition: translate 300ms, padding-inline-end 300ms;
+    }
+
+    .Carousel-controls--left:hover, .Carousel-controls--left:focus {
+      padding-inline-end: 0.25rem;
+      transition: translate 300ms, padding-inline-end 300ms;
+      translate: -0.25rem var(--Carousel-controls-translateY);
+    }
+
+    .Carousel-controls--right:hover, .Carousel-controls--right:focus {
+      padding-inline-start: 0.25rem;
+      transition: translate 300ms, padding-inline-end 300ms;
+      translate: 0.25rem var(--Carousel-controls-translateY);
+    }
+  }
 }

src/style/layout/Main.css

@@ -1,5 +1,8 @@
 @layer layout {
   .Main {
+    display: flex;
     flex-grow: 1;
+    align-items: center;
+    inline-size: 90%;
   }
 }