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 {

src/renderer/components/feature-carousel/feature-carousel.tsx

@@ -45,16 +45,19 @@ interface FeatureCarouselProps {
 
 const getItemsPerRow = (breakpoints: {
     is2xl: boolean;
+    is3xl: boolean;
     isLg: boolean;
     isMd: boolean;
     isSm: boolean;
     isXl: boolean;
 }) => {
+    if (breakpoints.is3xl) return 6;
     if (breakpoints.is2xl) return 5;
     if (breakpoints.isXl) return 5;
     if (breakpoints.isLg) return 4;
     if (breakpoints.isMd) return 3;
-    return 1;
+    if (breakpoints.isSm) return 2;
+    return 2;
 };
 
 interface CarouselItemProps {
@@ -143,6 +146,7 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
     const [startIndex, setStartIndex] = useState(0);
     const {
         is2xl,
+        is3xl,
         isLg,
         isMd,
         isSm,
@@ -150,6 +154,7 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
         ref: containerRef,
     } = useContainerQuery({
         '2xl': 1920,
+        '3xl': 2560,
         lg: 1024,
         md: 768,
         sm: 640,
@@ -157,8 +162,8 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
     });
 
     const itemsPerRow = useMemo(
-        () => getItemsPerRow({ is2xl, isLg, isMd, isSm, isXl }),
-        [is2xl, isLg, isMd, isSm, isXl],
+        () => getItemsPerRow({ is2xl, is3xl, isLg, isMd, isSm, isXl }),
+        [is2xl, is3xl, isLg, isMd, isSm, isXl],
     );
 
     const visibleItems = useMemo(() => {
@@ -198,6 +203,7 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
                     exit="exit"
                     initial="enter"
                     key={`carousel-${startIndex}`}
+                    style={{ '--items-per-row': itemsPerRow } as React.CSSProperties}
                     variants={fadeVariants}
                 >
                     {visibleItems.map((album) => (