carousel is now as big as the other elements

src/pages/home/home.css

@@ -141,16 +141,23 @@ h2 {
 }
 
 .stack-carousel-shell {
-  display: grid;
+  --carousel-nav-space: 4.25rem;
-  grid-template-columns: auto 1fr auto;
+  position: relative;
-  gap: 0.75rem;
+  width: calc(100% + (var(--carousel-nav-space) * 2));
-  align-items: center;
+  margin-inline: calc(var(--carousel-nav-space) * -1);
+  overflow: visible;
+}
+
+.stack-carousel-column {
+  width: calc(100% - (var(--carousel-nav-space) * 2));
+  margin-inline: auto;
 }
 
 .stack-carousel {
   display: flex;
   gap: 1rem;
   overflow-x: auto;
+  width: 100%;
   padding: 0.2rem;
   scroll-snap-type: x mandatory;
   scrollbar-width: thin;
@@ -230,6 +237,8 @@ h2 {
 }
 
 .carousel-btn {
+  position: absolute;
+  top: 50%;
   width: 2.5rem;
   height: 2.5rem;
   border: 1px solid #3d444d;
@@ -240,22 +249,30 @@ h2 {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
-  transform: translateY(2px);
+  transform: translateY(calc(-50% + 2px));
   transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease, opacity 120ms ease;
 }
 
+.stack-carousel-shell > .carousel-btn:first-of-type {
+  left: 0.85rem;
+}
+
+.stack-carousel-shell > .carousel-btn:last-of-type {
+  right: 0.85rem;
+}
+
 .stack-carousel-shell:hover .carousel-btn,
 .stack-carousel-shell:focus-within .carousel-btn {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
-  transform: translateY(0);
+  transform: translateY(-50%);
 }
 
 .carousel-btn:hover {
   border-color: #58a6ff;
   background: rgba(56, 139, 253, 0.2);
-  transform: translateY(-1px);
+  transform: translateY(calc(-50% - 1px));
 }
 
 .carousel-btn:focus-visible {
@@ -292,7 +309,13 @@ h2 {
   }
 
   .stack-carousel-shell {
-    grid-template-columns: 1fr;
+    --carousel-nav-space: 0;
+    width: 100%;
+    margin-inline: 0;
+  }
+
+  .stack-carousel-column {
+    width: 100%;
   }
 
   .carousel-btn {

src/pages/home/home.html

@@ -48,6 +48,7 @@
         <span aria-hidden="true">&larr;</span>
       </button>
 
+      <div class="stack-carousel-column">
         <div class="stack-carousel" #stackCarousel role="region" aria-label="Tech stack carousel">
           @for (skill of skills; track skill.name) {
             <app-card cardClass="skill-card stack-slide">
@@ -69,6 +70,7 @@
             </app-card>
           }
         </div>
+      </div>
 
       <button class="carousel-btn" type="button" aria-label="Next technologies" (click)="scrollStack(1)">
         <span aria-hidden="true">&rarr;</span>