add more breakpoints to carousel

src/renderer/components/feature-carousel/feature-carousel.module.css

@@ -16,14 +16,12 @@
     min-height: 400px;
     padding: var(--theme-spacing-xl);
     overflow: hidden;
-
-    --items-per-row: 1;
 }
 
 .carousel-item {
     position: relative;
     width: 100%;
-    min-height: 400px;
+    min-height: 440px;
     overflow: hidden;
     border-radius: var(--theme-radius-md);
     isolation: isolate;
@@ -51,7 +49,7 @@
     justify-content: flex-start;
     width: 100%;
     height: 100%;
-    min-height: 400px;
+    min-height: 440px;
     padding: var(--theme-spacing-xl);
 }
 
@@ -73,9 +71,9 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    height: 200px;
-    min-height: 200px;
-    max-height: 200px;
+    height: 250px;
+    min-height: 250px;
+    max-height: 250px;
 }
 
 .metadata-section {
@@ -170,25 +168,49 @@
     transform: translateY(-50%) scale(0.95);
 }
 
-@container (min-width: 640px) {
-    .carousel {
-        --items-per-row: 1;
+@container (min-width: $mantine-breakpoint-xs) {
+    .carousel-item {
+        min-height: 480px;
+    }
+
+    .content {
+        min-height: 480px;
+    }
+
+    .title-section {
+        height: 60px;
+        min-height: 60px;
+        max-height: 60px;
+    }
+
+    .image-section {
+        height: 300px;
+        min-height: 300px;
+        max-height: 300px;
+    }
+
+    .metadata-section {
+        height: 80px;
+        min-height: 80px;
+        max-height: 80px;
+    }
+
+    .album-image {
+        max-width: 160px;
     }
 }
 
 @container (min-width: $mantine-breakpoint-sm) {
     .carousel {
-        --items-per-row: 3;
-
         gap: var(--theme-spacing-lg);
     }
 
     .carousel-item {
-        min-height: 450px;
+        min-height: 500px;
     }
 
     .content {
-        min-height: 450px;
+        min-height: 500px;
     }
 
     .title-section {
@@ -198,9 +220,9 @@
     }
 
     .image-section {
-        height: 220px;
-        min-height: 220px;
-        max-height: 220px;
+        height: 280px;
+        min-height: 280px;
+        max-height: 280px;
     }
 
     .metadata-section {
@@ -215,16 +237,12 @@
 }
 
 @container (min-width: $mantine-breakpoint-md) {
-    .carousel {
-        --items-per-row: 4;
-    }
-
     .carousel-item {
-        min-height: 500px;
+        min-height: 550px;
     }
 
     .content {
-        min-height: 500px;
+        min-height: 550px;
     }
 
     .title-section {
@@ -234,9 +252,9 @@
     }
 
     .image-section {
-        height: 250px;
-        min-height: 250px;
-        max-height: 250px;
+        height: 320px;
+        min-height: 320px;
+        max-height: 320px;
     }
 
     .metadata-section {
@@ -251,16 +269,12 @@
 }
 
 @container (min-width: $mantine-breakpoint-xl) {
-    .carousel {
-        --items-per-row: 5;
-    }
-
     .carousel-item {
-        min-height: 550px;
+        min-height: 600px;
     }
 
     .content {
-        min-height: 550px;
+        min-height: 600px;
     }
 
     .title-section {
@@ -270,9 +284,9 @@
     }
 
     .image-section {
-        height: 280px;
-        min-height: 280px;
-        max-height: 280px;
+        height: 360px;
+        min-height: 360px;
+        max-height: 360px;
     }
 
     .metadata-section {