🎨 Style improve

components/DetailContent.tsx

@@ -60,16 +60,15 @@ const Preview = ({
         </CardHeader>
         <Divider className="bg-gray-200 dark:bg-slate-700" />
         <CardBody>
-          {/* <div className="grid grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3"> */}
-          <div className="flex flex-wrap gap-3">
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2 md:gap-3">
             {screenshots.map((item, index) => (
               <Image
                 key={item.screenshot}
                 isZoomed
-                className="min-h-28 max-h-48 cursor-pointer"
+                className="min-h-20 max-h-48 sm:min-h-28 cursor-pointer"
                 classNames={{
-                  wrapper: "!max-w-[30%] lg:!max-w-[22%] xl:!max-w-[18%]",
-                  img: "hover:scale-105 dark:brightness-50",
+                  wrapper: "w-full !max-w-full",
+                  img: "w-full hover:scale-105 dark:brightness-50",
                 }}
                 radius="sm"
                 src={item.screenshot}

components/EmblaCarousel.css

@@ -28,6 +28,10 @@
   width: var(--slide-size);
   height: var(--slide-size);
   object-fit: contain;
+  cursor: grab;
+}
+.embla__slide__img:active {
+  cursor: grabbing;
 }
 .embla__controls {
   display: grid;

tailwind.config.js

@@ -19,6 +19,10 @@ module.exports = {
         sans: ["var(--font-sans)"],
         mono: ["var(--font-mono)"],
       },
+      screens: {
+        'xs': '400px',
+        'sm': '540px',
+      },
       keyframes: {
         'fade-in': {
           '0%': { opacity: 0 },