responsive example

Author: Alexandru Cambose

apps/developer-hub/src/components/Pages/Homepage/index.module.scss

@@ -11,19 +11,10 @@
 }
 
 .cards {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 1.5rem;
-  margin-top: 2rem;
-
-  @media (width >= 768px) {
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 28rem));
-    gap: 2rem;
-    justify-content: center;
-  }
-
-  @media (width >= 1024px) {
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 28rem));
-    justify-content: flex-start;
+  display: flex;
+  gap: theme.spacing(10);
+  flex-direction: column;
+  @include theme.breakpoint("md") {
+    flex-direction: row;
   }
 }

apps/developer-hub/src/components/ProductCard/index.module.scss

@@ -1,26 +1,12 @@
 @use "@pythnetwork/component-library/theme";
 
 .card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  max-width: 28rem;
-  padding: 1.5rem; // 24px
+  flex: 1;
+  padding: theme.spacing(6);
   border: 1px solid var(--color-fd-border);
-  border-radius: 1.5rem; // 24px
+  border-radius: theme.border-radius("3xl");
   background-color: var(--color-fd-card);
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
-  overflow: hidden;
-
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    box-shadow: inset 0 4px 5.8px 0 var(--color-fd-background, #f6f3f3);
-    border-radius: 1.5rem; // 24px
-  }
 }
 
 .content {
@@ -91,7 +77,6 @@
   letter-spacing: -0.01em; // -0.16px
   color: var(--color-fd-foreground);
   opacity: 0.9;
-  max-width: 20rem;
   overflow: visible;
   display: -webkit-box;
   -webkit-line-clamp: 3;