Fix

datocms · Nov 7, 2024 · a612d3b · a612d3b
1 parent a1d8fda
commit a612d3b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 18 deletions.
diff --git a/src/pages/customers/_graphql.ts b/src/pages/customers/_graphql.ts
@@ -30,17 +30,7 @@ export const query = graphql(
             x
             y
           }
-          responsiveImage(
-            imgixParams: {
-              auto: format
-              ar: "16:9"
-              w: 960
-              fit: crop
-              monochrome: "450000"
-              nr: 20
-              nrs: 20
-            }
-          ) {
+          responsiveImage(imgixParams: { auto: format, ar: "16:9", w: 1200, fit: crop }) {
             ...ResponsiveImageFragment
           }
         }

diff --git a/src/pages/user-guides/_Chapter.astro b/src/pages/user-guides/_Chapter.astro
@@ -48,8 +48,10 @@ const allVideosDurations = sum(
       {chapter.episodes.map((episode) => <VideoCard episode={episode} />)}
     </div>
 
-    <Carousel buttonsY="40%" class={s.carousel}>
-      {chapter.episodes.map((episode) => <VideoCard episode={episode} />)}
-    </Carousel>
+    <div class={s.carouselWrapper}>
+      <Carousel buttonsY="40%">
+        {chapter.episodes.map((episode) => <VideoCard episode={episode} />)}
+      </Carousel>
+    </div>
   </section>
 </div>
diff --git a/src/pages/user-guides/_style.module.css b/src/pages/user-guides/_style.module.css
@@ -158,7 +158,7 @@
   background-color: var(--light-bg-color);
 
   @media screen and (min-width: 768px) {
-    border-radius: 0.675rem;
+    border-radius: 6px;
   }
 
   img {
@@ -189,12 +189,16 @@
   color: var(--extra-light-body-color);
 }
 
-.carousel {
+.carouselWrapper {
   display: none;
-  margin: 0 !important;
-  padding: 0 calc(var(--page-margin) * 2) !important;
 
   @media screen and (min-width: 768px) {
     display: block;
+    max-width: var(--page-width);
+    padding: 0 var(--page-margin);
+  }
+
+  @media screen and (min-width: 1200px) {
+    padding: 0 calc(var(--page-margin) * 2);
   }
 }