diff --git a/src/once-ui/components/Flex.tsx b/src/once-ui/components/Flex.tsx
index 9e98a58..6955acd 100644
--- a/src/once-ui/components/Flex.tsx
+++ b/src/once-ui/components/Flex.tsx
@@ -302,4 +302,4 @@ const Flex = forwardRef<HTMLDivElement, ComponentProps>(
 );
 
 Flex.displayName = "Flex";
-export { Flex };
+export { Flex };
\ No newline at end of file
diff --git a/src/once-ui/interfaces.ts b/src/once-ui/interfaces.ts
index c7e2031..78619d5 100644
--- a/src/once-ui/interfaces.ts
+++ b/src/once-ui/interfaces.ts
@@ -133,8 +133,8 @@ export interface StyleProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export interface ConditionalProps extends HTMLAttributes<HTMLDivElement> {
-  hide?: "s" | "m";
-  show?: "s" | "m";
+  hide?: "s" | "m" | "l";
+  show?: "s" | "m" | "l";
 }
 
 export interface DisplayProps extends HTMLAttributes<HTMLDivElement> {
diff --git a/src/once-ui/styles/layout.scss b/src/once-ui/styles/layout.scss
index a1b8baa..972bc73 100644
--- a/src/once-ui/styles/layout.scss
+++ b/src/once-ui/styles/layout.scss
@@ -26,6 +26,10 @@
     flex-direction: row-reverse;
 }
 
+.l-flex-show {
+    display: none;
+}
+
 .m-flex-show {
     display: none;
 }
@@ -34,6 +38,32 @@
     display: none;
 }
 
+@media (--l) {
+    .l-flex-hide {
+        display: none !important;
+    }
+
+    .l-flex-show {
+        display: flex !important;
+    }
+
+    .l-flex-column {
+        flex-direction: column !important;
+    }
+
+    .l-flex-row {
+        flex-direction: row !important;
+    }
+
+    .l-flex-column-reverse {
+        flex-direction: column-reverse !important;
+    }
+    
+    .l-flex-row-reverse {
+        flex-direction: row-reverse !important;
+    }
+}
+
 @media (--m) {
     .m-flex-hide {
         display: none !important;