changes

components/common/FeatureBar/FeatureBar.module.css

@@ -1,7 +1,9 @@
 .root {
   @apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30 transition-all duration-300 ease-out;
+}
 
-  @screen md {
+@screen md {
+  .root {
     @apply flex text-left;
   }
 }

components/common/I18nWidget/I18nWidget.module.css

@@ -16,14 +16,16 @@
 
 .dropdownMenu {
   @apply fixed right-0 top-12 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
+}
 
-  @screen lg {
+@screen lg {
+  .dropdownMenu {
     @apply absolute border border-accents-1 shadow-lg w-56 h-auto;
   }
 }
 
-.closeButton {
-  @screen md {
+@screen md {
+  .closeButton {
     @apply hidden;
   }
 }

components/common/UserNav/DropdownMenu.module.css

@@ -1,7 +1,9 @@
 .dropdownMenu {
   @apply fixed right-0 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
+}
 
-  @screen lg {
+@screen lg {
+  .dropdownMenu {
     @apply absolute top-10 border border-accents-1 shadow-lg w-56 h-auto;
   }
 }

components/ui/Grid/Grid.module.css

@@ -3,10 +3,6 @@
   @apply grid grid-cols-1 gap-0;
   min-height: var(--row-height);
 
-  @screen lg {
-    @apply grid-cols-3 grid-rows-2;
-  }
-
   & > * {
     @apply row-span-1 bg-transparent box-border overflow-hidden;
     height: 500px;
@@ -19,6 +15,17 @@
   }
 }
 
+@screen lg {
+  .root {
+    @apply grid-cols-3 grid-rows-2;
+  }
+
+  .root & > * {
+    @apply col-span-1;
+    height: inherit;
+  }
+}
+
 .default {
   & > * {
     @apply bg-transparent;

components/ui/Hero/Hero.module.css

@@ -1,6 +1,9 @@
 .root {
   @apply mx-auto grid grid-cols-1 py-32 gap-4;
-  @screen md {
+}
+
+@screen md {
+  .root {
     @apply grid-cols-2;
   }
 }