@alfalab/core-components 45.6.0-beta.2 → 45.6.1

package/grid/cssm/col/index.module.css

@@ -0,0 +1,2002 @@
+:root {
+    --grid-col-width: calc(100% / 12);
+}
+
+.component {
+    max-width: 100%;
+    min-height: 1px;
+    flex-basis: 0;
+    flex-grow: 1;
+    box-sizing: border-box;
+}
+
+.width-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: none;
+}
+
+.width-available {
+    flex-basis: auto;
+    min-height: auto;
+    height: auto;
+}
+
+.width-1 {
+        flex: 0 0 calc(var(--grid-col-width) * 1);
+        max-width: calc(var(--grid-col-width) * 1);
+    }
+
+.width-2 {
+        flex: 0 0 calc(var(--grid-col-width) * 2);
+        max-width: calc(var(--grid-col-width) * 2);
+    }
+
+.width-3 {
+        flex: 0 0 calc(var(--grid-col-width) * 3);
+        max-width: calc(var(--grid-col-width) * 3);
+    }
+
+.width-4 {
+        flex: 0 0 calc(var(--grid-col-width) * 4);
+        max-width: calc(var(--grid-col-width) * 4);
+    }
+
+.width-5 {
+        flex: 0 0 calc(var(--grid-col-width) * 5);
+        max-width: calc(var(--grid-col-width) * 5);
+    }
+
+.width-6 {
+        flex: 0 0 calc(var(--grid-col-width) * 6);
+        max-width: calc(var(--grid-col-width) * 6);
+    }
+
+.width-7 {
+        flex: 0 0 calc(var(--grid-col-width) * 7);
+        max-width: calc(var(--grid-col-width) * 7);
+    }
+
+.width-8 {
+        flex: 0 0 calc(var(--grid-col-width) * 8);
+        max-width: calc(var(--grid-col-width) * 8);
+    }
+
+.width-9 {
+        flex: 0 0 calc(var(--grid-col-width) * 9);
+        max-width: calc(var(--grid-col-width) * 9);
+    }
+
+.width-10 {
+        flex: 0 0 calc(var(--grid-col-width) * 10);
+        max-width: calc(var(--grid-col-width) * 10);
+    }
+
+.width-11 {
+        flex: 0 0 calc(var(--grid-col-width) * 11);
+        max-width: calc(var(--grid-col-width) * 11);
+    }
+
+.width-12 {
+        flex: 0 0 calc(var(--grid-col-width) * 12);
+        max-width: calc(var(--grid-col-width) * 12);
+    }
+
+.align-top {
+    align-self: flex-start;
+}
+
+.align-middle {
+    align-self: center;
+}
+
+.align-bottom {
+    align-self: flex-end;
+}
+
+.offset-1 {
+        margin-left: calc(var(--grid-col-width) * 1);
+    }
+
+.offset-2 {
+        margin-left: calc(var(--grid-col-width) * 2);
+    }
+
+.offset-3 {
+        margin-left: calc(var(--grid-col-width) * 3);
+    }
+
+.offset-4 {
+        margin-left: calc(var(--grid-col-width) * 4);
+    }
+
+.offset-5 {
+        margin-left: calc(var(--grid-col-width) * 5);
+    }
+
+.offset-6 {
+        margin-left: calc(var(--grid-col-width) * 6);
+    }
+
+.offset-7 {
+        margin-left: calc(var(--grid-col-width) * 7);
+    }
+
+.offset-8 {
+        margin-left: calc(var(--grid-col-width) * 8);
+    }
+
+.offset-9 {
+        margin-left: calc(var(--grid-col-width) * 9);
+    }
+
+.offset-10 {
+        margin-left: calc(var(--grid-col-width) * 10);
+    }
+
+.offset-11 {
+        margin-left: calc(var(--grid-col-width) * 11);
+    }
+
+.order-first {
+    order: -1;
+}
+
+.order-last {
+    order: 13;
+}
+
+.order-1 {
+        order: 1;
+    }
+
+.order-2 {
+        order: 2;
+    }
+
+.order-3 {
+        order: 3;
+    }
+
+.order-4 {
+        order: 4;
+    }
+
+.order-5 {
+        order: 5;
+    }
+
+.order-6 {
+        order: 6;
+    }
+
+.order-7 {
+        order: 7;
+    }
+
+.order-8 {
+        order: 8;
+    }
+
+.order-9 {
+        order: 9;
+    }
+
+.order-10 {
+        order: 10;
+    }
+
+.order-11 {
+        order: 11;
+    }
+
+.order-12 {
+        order: 12;
+    }
+
+@media (max-width: 599px) {
+        .width-mobile-auto {
+            flex: 0 0 auto;
+            width: auto;
+            max-width: none;
+        }
+
+        .width-mobile-available {
+            flex-basis: auto;
+            min-height: auto;
+            height: auto;
+        }
+            .width-mobile-1 {
+                flex: 0 0 calc(var(--grid-col-width) * 1);
+                max-width: calc(var(--grid-col-width) * 1);
+            }
+            .width-mobile-2 {
+                flex: 0 0 calc(var(--grid-col-width) * 2);
+                max-width: calc(var(--grid-col-width) * 2);
+            }
+            .width-mobile-3 {
+                flex: 0 0 calc(var(--grid-col-width) * 3);
+                max-width: calc(var(--grid-col-width) * 3);
+            }
+            .width-mobile-4 {
+                flex: 0 0 calc(var(--grid-col-width) * 4);
+                max-width: calc(var(--grid-col-width) * 4);
+            }
+            .width-mobile-5 {
+                flex: 0 0 calc(var(--grid-col-width) * 5);
+                max-width: calc(var(--grid-col-width) * 5);
+            }
+            .width-mobile-6 {
+                flex: 0 0 calc(var(--grid-col-width) * 6);
+                max-width: calc(var(--grid-col-width) * 6);
+            }
+            .width-mobile-7 {
+                flex: 0 0 calc(var(--grid-col-width) * 7);
+                max-width: calc(var(--grid-col-width) * 7);
+            }
+            .width-mobile-8 {
+                flex: 0 0 calc(var(--grid-col-width) * 8);
+                max-width: calc(var(--grid-col-width) * 8);
+            }
+            .width-mobile-9 {
+                flex: 0 0 calc(var(--grid-col-width) * 9);
+                max-width: calc(var(--grid-col-width) * 9);
+            }
+            .width-mobile-10 {
+                flex: 0 0 calc(var(--grid-col-width) * 10);
+                max-width: calc(var(--grid-col-width) * 10);
+            }
+            .width-mobile-11 {
+                flex: 0 0 calc(var(--grid-col-width) * 11);
+                max-width: calc(var(--grid-col-width) * 11);
+            }
+            .width-mobile-12 {
+                flex: 0 0 calc(var(--grid-col-width) * 12);
+                max-width: calc(var(--grid-col-width) * 12);
+            }
+            .offset-mobile-1 {
+                margin-left: calc(var(--grid-col-width) * 1);
+            }
+            .offset-mobile-2 {
+                margin-left: calc(var(--grid-col-width) * 2);
+            }
+            .offset-mobile-3 {
+                margin-left: calc(var(--grid-col-width) * 3);
+            }
+            .offset-mobile-4 {
+                margin-left: calc(var(--grid-col-width) * 4);
+            }
+            .offset-mobile-5 {
+                margin-left: calc(var(--grid-col-width) * 5);
+            }
+            .offset-mobile-6 {
+                margin-left: calc(var(--grid-col-width) * 6);
+            }
+            .offset-mobile-7 {
+                margin-left: calc(var(--grid-col-width) * 7);
+            }
+            .offset-mobile-8 {
+                margin-left: calc(var(--grid-col-width) * 8);
+            }
+            .offset-mobile-9 {
+                margin-left: calc(var(--grid-col-width) * 9);
+            }
+            .offset-mobile-10 {
+                margin-left: calc(var(--grid-col-width) * 10);
+            }
+            .offset-mobile-11 {
+                margin-left: calc(var(--grid-col-width) * 11);
+            }
+
+        .order-mobile-first {
+            order: -1;
+        }
+
+        .order-mobile-last {
+            order: 13;
+        }
+            .order-mobile-1 {
+                order: 1;
+            }
+            .order-mobile-2 {
+                order: 2;
+            }
+            .order-mobile-3 {
+                order: 3;
+            }
+            .order-mobile-4 {
+                order: 4;
+            }
+            .order-mobile-5 {
+                order: 5;
+            }
+            .order-mobile-6 {
+                order: 6;
+            }
+            .order-mobile-7 {
+                order: 7;
+            }
+            .order-mobile-8 {
+                order: 8;
+            }
+            .order-mobile-9 {
+                order: 9;
+            }
+            .order-mobile-10 {
+                order: 10;
+            }
+            .order-mobile-11 {
+                order: 11;
+            }
+            .order-mobile-12 {
+                order: 12;
+            }
+    }
+
+@media (min-width: 320px) {
+        .width-mobile-xs-auto {
+            flex: 0 0 auto;
+            width: auto;
+            max-width: none;
+        }
+
+        .width-mobile-xs-available {
+            flex-basis: auto;
+            min-height: auto;
+            height: auto;
+        }
+            .width-mobile-xs-1 {
+                flex: 0 0 calc(var(--grid-col-width) * 1);
+                max-width: calc(var(--grid-col-width) * 1);
+            }
+            .width-mobile-xs-2 {
+                flex: 0 0 calc(var(--grid-col-width) * 2);
+                max-width: calc(var(--grid-col-width) * 2);
+            }
+            .width-mobile-xs-3 {
+                flex: 0 0 calc(var(--grid-col-width) * 3);
+                max-width: calc(var(--grid-col-width) * 3);
+            }
+            .width-mobile-xs-4 {
+                flex: 0 0 calc(var(--grid-col-width) * 4);
+                max-width: calc(var(--grid-col-width) * 4);
+            }
+            .width-mobile-xs-5 {
+                flex: 0 0 calc(var(--grid-col-width) * 5);
+                max-width: calc(var(--grid-col-width) * 5);
+            }
+            .width-mobile-xs-6 {
+                flex: 0 0 calc(var(--grid-col-width) * 6);
+                max-width: calc(var(--grid-col-width) * 6);
+            }
+            .width-mobile-xs-7 {
+                flex: 0 0 calc(var(--grid-col-width) * 7);
+                max-width: calc(var(--grid-col-width) * 7);
+            }
+            .width-mobile-xs-8 {
+                flex: 0 0 calc(var(--grid-col-width) * 8);
+                max-width: calc(var(--grid-col-width) * 8);
+            }
+            .width-mobile-xs-9 {
+                flex: 0 0 calc(var(--grid-col-width) * 9);
+                max-width: calc(var(--grid-col-width) * 9);
+            }
+            .width-mobile-xs-10 {
+                flex: 0 0 calc(var(--grid-col-width) * 10);
+                max-width: calc(var(--grid-col-width) * 10);
+            }
+            .width-mobile-xs-11 {
+                flex: 0 0 calc(var(--grid-col-width) * 11);
+                max-width: calc(var(--grid-col-width) * 11);
+            }
+            .width-mobile-xs-12 {
+                flex: 0 0 calc(var(--grid-col-width) * 12);
+                max-width: calc(var(--grid-col-width) * 12);
+            }
+            .offset-mobile-xs-1 {
+                margin-left: calc(var(--grid-col-width) * 1);
+            }
+            .offset-mobile-xs-2 {
+                margin-left: calc(var(--grid-col-width) * 2);
+            }
+            .offset-mobile-xs-3 {
+                margin-left: calc(var(--grid-col-width) * 3);
+            }
+            .offset-mobile-xs-4 {
+                margin-left: calc(var(--grid-col-width) * 4);
+            }
+            .offset-mobile-xs-5 {
+                margin-left: calc(var(--grid-col-width) * 5);
+            }
+            .offset-mobile-xs-6 {
+                margin-left: calc(var(--grid-col-width) * 6);
+            }
+            .offset-mobile-xs-7 {
+                margin-left: calc(var(--grid-col-width) * 7);
+            }
+            .offset-mobile-xs-8 {
+                margin-left: calc(var(--grid-col-width) * 8);
+            }
+            .offset-mobile-xs-9 {
+                margin-left: calc(var(--grid-col-width) * 9);
+            }
+            .offset-mobile-xs-10 {
+                margin-left: calc(var(--grid-col-width) * 10);
+            }
+            .offset-mobile-xs-11 {
+                margin-left: calc(var(--grid-col-width) * 11);
+            }
+
+        .order-mobile-xs-first {
+            order: -1;
+        }
+
+        .order-mobile-xs-last {
+            order: 13;
+        }
+            .order-mobile-xs-1 {
+                order: 1;
+            }
+            .order-mobile-xs-2 {
+                order: 2;
+            }
+            .order-mobile-xs-3 {
+                order: 3;
+            }
+            .order-mobile-xs-4 {
+                order: 4;
+            }
+            .order-mobile-xs-5 {
+                order: 5;
+            }
+            .order-mobile-xs-6 {
+                order: 6;
+            }
+            .order-mobile-xs-7 {
+                order: 7;
+            }
+            .order-mobile-xs-8 {
+                order: 8;
+            }
+            .order-mobile-xs-9 {
+                order: 9;
+            }
+            .order-mobile-xs-10 {
+                order: 10;
+            }
+            .order-mobile-xs-11 {
+                order: 11;
+            }
+            .order-mobile-xs-12 {
+                order: 12;
+            }
+    }
+
+@media (min-width: 360px) {
+        .width-mobile-s-auto {
+            flex: 0 0 auto;
+            width: auto;
+            max-width: none;
+        }
+
+        .width-mobile-s-available {
+            flex-basis: auto;
+            min-height: auto;
+            height: auto;
+        }
+            .width-mobile-s-1 {
+                flex: 0 0 calc(var(--grid-col-width) * 1);
+                max-width: calc(var(--grid-col-width) * 1);
+            }
+            .width-mobile-s-2 {
+                flex: 0 0 calc(var(--grid-col-width) * 2);
+                max-width: calc(var(--grid-col-width) * 2);
+            }
+            .width-mobile-s-3 {
+                flex: 0 0 calc(var(--grid-col-width) * 3);
+                max-width: calc(var(--grid-col-width) * 3);
+            }
+            .width-mobile-s-4 {
+                flex: 0 0 calc(var(--grid-col-width) * 4);
+                max-width: calc(var(--grid-col-width) * 4);
+            }
+            .width-mobile-s-5 {
+                flex: 0 0 calc(var(--grid-col-width) * 5);
+                max-width: calc(var(--grid-col-width) * 5);
+            }
+            .width-mobile-s-6 {
+                flex: 0 0 calc(var(--grid-col-width) * 6);
+                max-width: calc(var(--grid-col-width) * 6);
+            }
+            .width-mobile-s-7 {
+                flex: 0 0 calc(var(--grid-col-width) * 7);
+                max-width: calc(var(--grid-col-width) * 7);
+            }
+            .width-mobile-s-8 {
+                flex: 0 0 calc(var(--grid-col-width) * 8);
+                max-width: calc(var(--grid-col-width) * 8);
+            }
+            .width-mobile-s-9 {
+                flex: 0 0 calc(var(--grid-col-width) * 9);
+                max-width: calc(var(--grid-col-width) * 9);
+            }
+            .width-mobile-s-10 {
+                flex: 0 0 calc(var(--grid-col-width) * 10);
+                max-width: calc(var(--grid-col-width) * 10);
+            }
+            .width-mobile-s-11 {
+                flex: 0 0 calc(var(--grid-col-width) * 11);
+                max-width: calc(var(--grid-col-width) * 11);
+            }
+            .width-mobile-s-12 {
+                flex: 0 0 calc(var(--grid-col-width) * 12);
+                max-width: calc(var(--grid-col-width) * 12);
+            }
+            .offset-mobile-s-1 {
+                margin-left: calc(var(--grid-col-width) * 1);
+            }
+            .offset-mobile-s-2 {
+                margin-left: calc(var(--grid-col-width) * 2);
+            }
+            .offset-mobile-s-3 {
+                margin-left: calc(var(--grid-col-width) * 3);
+            }
+            .offset-mobile-s-4 {
+                margin-left: calc(var(--grid-col-width) * 4);
+            }
+            .offset-mobile-s-5 {
+                margin-left: calc(var(--grid-col-width) * 5);
+            }
+            .offset-mobile-s-6 {
+                margin-left: calc(var(--grid-col-width) * 6);
+            }
+            .offset-mobile-s-7 {
+                margin-left: calc(var(--grid-col-width) * 7);
+            }
+            .offset-mobile-s-8 {
+                margin-left: calc(var(--grid-col-width) * 8);
+            }
+            .offset-mobile-s-9 {
+                margin-left: calc(var(--grid-col-width) * 9);
+            }
+            .offset-mobile-s-10 {
+                margin-left: calc(var(--grid-col-width) * 10);
+            }
+            .offset-mobile-s-11 {
+                margin-left: calc(var(--grid-col-width) * 11);
+            }
+
+        .order-mobile-s-first {
+            order: -1;
+        }
+
+        .order-mobile-s-last {
+            order: 13;
+        }
+            .order-mobile-s-1 {
+                order: 1;
+            }
+            .order-mobile-s-2 {
+                order: 2;
+            }
+            .order-mobile-s-3 {
+                order: 3;
+            }
+            .order-mobile-s-4 {
+                order: 4;
+            }
+            .order-mobile-s-5 {
+                order: 5;
+            }
+            .order-mobile-s-6 {
+                order: 6;
+            }
+            .order-mobile-s-7 {
+                order: 7;
+            }
+            .order-mobile-s-8 {
+                order: 8;
+            }
+            .order-mobile-s-9 {
+                order: 9;
+            }
+            .order-mobile-s-10 {
+                order: 10;
+            }
+            .order-mobile-s-11 {
+                order: 11;
+            }
+            .order-mobile-s-12 {
+                order: 12;
+            }
+    }
+
+@media (min-width: 375px) {
+        .width-mobile-m-auto {
+            flex: 0 0 auto;
+            width: auto;
+            max-width: none;
+        }
+
+        .width-mobile-m-available {
+            flex-basis: auto;
+            min-height: auto;
+            height: auto;
+        }
+            .width-mobile-m-1 {
+                flex: 0 0 calc(var(--grid-col-width) * 1);
+                max-width: calc(var(--grid-col-width) * 1);
+            }
+            .width-mobile-m-2 {
+                flex: 0 0 calc(var(--grid-col-width) * 2);
+                max-width: calc(var(--grid-col-width) * 2);
+            }
+            .width-mobile-m-3 {
+                flex: 0 0 calc(var(--grid-col-width) * 3);
+                max-width: calc(var(--grid-col-width) * 3);
+            }
+            .width-mobile-m-4 {
+                flex: 0 0 calc(var(--grid-col-width) * 4);
+                max-width: calc(var(--grid-col-width) * 4);
+            }
+            .width-mobile-m-5 {
+                flex: 0 0 calc(var(--grid-col-width) * 5);
+                max-width: calc(var(--grid-col-width) * 5);
+            }
+            .width-mobile-m-6 {
+                flex: 0 0 calc(var(--grid-col-width) * 6);
+                max-width: calc(var(--grid-col-width) * 6);
+            }
+            .width-mobile-m-7 {
+                flex: 0 0 calc(var(--grid-col-width) * 7);
+                max-width: calc(var(--grid-col-width) * 7);
+            }
+            .width-mobile-m-8 {
+                flex: 0 0 calc(var(--grid-col-width) * 8);
+                max-width: calc(var(--grid-col-width) * 8);
+            }
+            .width-mobile-m-9 {
+                flex: 0 0 calc(var(--grid-col-width) * 9);
+                max-width: calc(var(--grid-col-width) * 9);
+            }
+            .width-mobile-m-10 {
+                flex: 0 0 calc(var(--grid-col-width) * 10);
+                max-width: calc(var(--grid-col-width) * 10);
+            }
+            .width-mobile-m-11 {
+                flex: 0 0 calc(var(--grid-col-width) * 11);
+                max-width: calc(var(--grid-col-width) * 11);
+            }
+            .width-mobile-m-12 {
+                flex: 0 0 calc(var(--grid-col-width) * 12);
+                max-width: calc(var(--grid-col-width) * 12);
+            }
+            .offset-mobile-m-1 {
+                margin-left: calc(var(--grid-col-width) * 1);
+            }
+            .offset-mobile-m-2 {
+                margin-left: calc(var(--grid-col-width) * 2);
+            }
+            .offset-mobile-m-3 {
+                margin-left: calc(var(--grid-col-width) * 3);
+            }
+            .offset-mobile-m-4 {
+                margin-left: calc(var(--grid-col-width) * 4);
+            }
+            .offset-mobile-m-5 {
+                margin-left: calc(var(--grid-col-width) * 5);
+            }
+            .offset-mobile-m-6 {
+                margin-left: calc(var(--grid-col-width) * 6);
+            }
+            .offset-mobile-m-7 {
+                margin-left: calc(var(--grid-col-width) * 7);
+            }
+            .offset-mobile-m-8 {
+                margin-left: calc(var(--grid-col-width) * 8);
+            }
+            .offset-mobile-m-9 {
+                margin-left: calc(var(--grid-col-width) * 9);
+            }
+            .offset-mobile-m-10 {
+                margin-left: calc(var(--grid-col-width) * 10);
+            }
+            .offset-mobile-m-11 {
+                margin-left: calc(var(--grid-col-width) * 11);
+            }
+
+        .order-mobile-m-first {
+            order: -1;
+        }
+
+        .order-mobile-m-last {
+            order: 13;
+        }
+            .order-mobile-m-1 {
+                order: 1;
+            }
+            .order-mobile-m-2 {
+                order: 2;
+            }
+            .order-mobile-m-3 {
+                order: 3;
+            }
+            .order-mobile-m-4 {
+                order: 4;
+            }
+            .order-mobile-m-5 {
+                order: 5;
+            }
+            .order-mobile-m-6 {
+                order: 6;
+            }
+            .order-mobile-m-7 {
+                order: 7;
+            }
+            .order-mobile-m-8 {
+                order: 8;
+            }
+            .order-mobile-m-9 {
+                order: 9;
+            }
+            .order-mobile-m-10 {
+                order: 10;
+            }
+            .order-mobile-m-11 {
+                order: 11;
+            }
+            .order-mobile-m-12 {
+                order: 12;
+            }
+    }
+
+@media (min-width: 412px) {
+        .width-mobile-l-auto {
+            flex: 0 0 auto;
+            width: auto;
+            max-width: none;
+        }
+
+        .width-mobile-l-available {
+            flex-basis: auto;
+            min-height: auto;
+            height: auto;
+        }
+            .width-mobile-l-1 {
+                flex: 0 0 calc(var(--grid-col-width) * 1);
+                max-width: calc(var(--grid-col-width) * 1);
+            }
+            .width-mobile-l-2 {
+                flex: 0 0 calc(var(--grid-col-width) * 2);
+                max-width: calc(var(--grid-col-width) * 2);
+            }
+            .width-mobile-l-3 {
+                flex: 0 0 calc(var(--grid-col-width) * 3);
+                max-width: calc(var(--grid-col-width) * 3);
+            }
+            .width-mobile-l-4 {
+                flex: 0 0 calc(var(--grid-col-width) * 4);
+                max-width: calc(var(--grid-col-width) * 4);
+            }
+            .width-mobile-l-5 {
+                flex: 0 0 calc(var(--grid-col-width) * 5);
+                max-width: calc(var(--grid-col-width) * 5);
+            }
+            .width-mobile-l-6 {
+                flex: 0 0 calc(var(--grid-col-width) * 6);
+                max-width: calc(var(--grid-col-width) * 6);
+            }
+            .width-mobile-l-7 {
+                flex: 0 0 calc(var(--grid-col-width) * 7);
+                max-width: calc(var(--grid-col-width) * 7);
+            }
+            .width-mobile-l-8 {
+                flex: 0 0 calc(var(--grid-col-width) * 8);
+                max-width: calc(var(--grid-col-width) * 8);
+            }
+            .width-mobile-l-9 {
+                flex: 0 0 calc(var(--grid-col-width) * 9);
+                max-width: calc(var(--grid-col-width) * 9);
+            }
+            .width-mobile-l-10 {
+                flex: 0 0 calc(var(--grid-col-width) * 10);
+                max-width: calc(var(--grid-col-width) * 10);
+            }
+            .width-mobile-l-11 {
+                flex: 0 0 calc(var(--grid-col-width) * 11);
+                max-width: calc(var(--grid-col-width) * 11);
+            }
+            .width-mobile-l-12 {
+                flex: 0 0 calc(var(--grid-col-width) * 12);
+                max-width: calc(var(--grid-col-width) * 12);
+            }
+            .offset-mobile-l-1 {
+                margin-left: calc(var(--grid-col-width) * 1);
+            }
+            .offset-mobile-l-2 {
+                margin-left: calc(var(--grid-col-width) * 2);
+            }
+            .offset-mobile-l-3 {
+                margin-left: calc(var(--grid-col-width) * 3);
+            }
+            .offset-mobile-l-4 {
+                margin-left: calc(var(--grid-col-width) * 4);
+            }
+            .offset-mobile-l-5 {
+                margin-left: calc(var(--grid-col-width) * 5);
+            }
+            .offset-mobile-l-6 {
+                margin-left: calc(var(--grid-col-width) * 6);
+            }
+            .offset-mobile-l-7 {
+                margin-left: calc(var(--grid-col-width) * 7);
+            }
+            .offset-mobile-l-8 {
+                margin-left: calc(var(--grid-col-width) * 8);
+            }
+            .offset-mobile-l-9 {
+                margin-left: calc(var(--grid-col-width) * 9);
+            }
+            .offset-mobile-l-10 {
+                margin-left: calc(var(--grid-col-width) * 10);
+            }
+            .offset-mobile-l-11 {
+                margin-left: calc(var(--grid-col-width) * 11);
+            }
+
+        .order-mobile-l-first {
+            order: -1;
+        }
+
+        .order-mobile-l-last {
+            order: 13;
+        }
+            .order-mobile-l-1 {
+                order: 1;
+            }
+            .order-mobile-l-2 {
+                order: 2;
+            }
+            .order-mobile-l-3 {
+                order: 3;
+            }
+            .order-mobile-l-4 {
+                order: 4;
+            }
+            .order-mobile-l-5 {
+                order: 5;
+            }
+            .order-mobile-l-6 {
+                order: 6;
+            }
+            .order-mobile-l-7 {
+                order: 7;
+            }
+            .order-mobile-l-8 {
+                order: 8;
+            }
+            .order-mobile-l-9 {
+                order: 9;
+            }
+            .order-mobile-l-10 {
+                order: 10;
+            }
+            .order-mobile-l-11 {
+                order: 11;
+            }
+            .order-mobile-l-12 {
+                order: 12;
+            }
+    }
+
+@media (min-width: 600px) and (max-width: 1023px) {
+        .width-tablet-auto {
+            flex: 0 0 auto;
+            width: auto;
+            max-width: none;
+        }
+
+        .width-tablet-available {
+            flex-basis: auto;
+            min-height: auto;
+            height: auto;
+        }
+            .width-tablet-1 {
+                flex: 0 0 calc(var(--grid-col-width) * 1);
+                max-width: calc(var(--grid-col-width) * 1);
+            }
+            .width-tablet-2 {
+                flex: 0 0 calc(var(--grid-col-width) * 2);
+                max-width: calc(var(--grid-col-width) * 2);
+            }
+            .width-tablet-3 {
+                flex: 0 0 calc(var(--grid-col-width) * 3);
+                max-width: calc(var(--grid-col-width) * 3);
+            }
+            .width-tablet-4 {
+                flex: 0 0 calc(var(--grid-col-width) * 4);
+                max-width: calc(var(--grid-col-width) * 4);
+            }
+            .width-tablet-5 {
+                flex: 0 0 calc(var(--grid-col-width) * 5);
+                max-width: calc(var(--grid-col-width) * 5);
+            }
+            .width-tablet-6 {
+                flex: 0 0 calc(var(--grid-col-width) * 6);
+                max-width: calc(var(--grid-col-width) * 6);
+            }
+            .width-tablet-7 {
+                flex: 0 0 calc(var(--grid-col-width) * 7);
+                max-width: calc(var(--grid-col-width) * 7);
+            }
+            .width-tablet-8 {
+                flex: 0 0 calc(var(--grid-col-width) * 8);
+                max-width: calc(var(--grid-col-width) * 8);
+            }
+            .width-tablet-9 {
+                flex: 0 0 calc(var(--grid-col-width) * 9);
+                max-width: calc(var(--grid-col-width) * 9);
+            }
+            .width-tablet-10 {
+                flex: 0 0 calc(var(--grid-col-width) * 10);
+                max-width: calc(var(--grid-col-width) * 10);
+            }
+            .width-tablet-11 {
+                flex: 0 0 calc(var(--grid-col-width) * 11);
+                max-width: calc(var(--grid-col-width) * 11);
+            }
+            .width-tablet-12 {
+                flex: 0 0 calc(var(--grid-col-width) * 12);
+                max-width: calc(var(--grid-col-width) * 12);
+            }
+            .offset-tablet-1 {
+                margin-left: calc(var(--grid-col-width) * 1);
+            }
+            .offset-tablet-2 {
+                margin-left: calc(var(--grid-col-width) * 2);
+            }
+            .offset-tablet-3 {
+                margin-left: calc(var(--grid-col-width) * 3);
+            }
+            .offset-tablet-4 {
+                margin-left: calc(var(--grid-col-width) * 4);
+            }
+            .offset-tablet-5 {
+                margin-left: calc(var(--grid-col-width) * 5);
+            }
+            .offset-tablet-6 {
+                margin-left: calc(var(--grid-col-width) * 6);
+            }
+            .offset-tablet-7 {
+                margin-left: calc(var(--grid-col-width) * 7);
+            }
+            .offset-tablet-8 {
+                margin-left: calc(var(--grid-col-width) * 8);
+            }
+            .offset-tablet-9 {
+                margin-left: calc(var(--grid-col-width) * 9);
+            }
+            .offset-tablet-10 {
+                margin-left: calc(var(--grid-col-width) * 10);
+            }
+            .offset-tablet-11 {
+                margin-left: calc(var(--grid-col-width) * 11);
+            }
+
+        .order-tablet-first {
+            order: -1;
+        }
+
+        .order-tablet-last {
+            order: 13;
+        }
+            .order-tablet-1 {
+                order: 1;
+            }
+            .order-tablet-2 {
+                order: 2;
+            }
+            .order-tablet-3 {
+                order: 3;
+            }
+            .order-tablet-4 {
+                order: 4;
+            }
+            .order-tablet-5 {
+                order: 5;
+            }
+            .order-tablet-6 {
+                order: 6;
+            }
+            .order-tablet-7 {
+                order: 7;
+            }
+            .order-tablet-8 {
+                order: 8;
+            }
+            .order-tablet-9 {
+                order: 9;
+            }
+            .order-tablet-10 {
+                order: 10;
+            }
+            .order-tablet-11 {
+                order: 11;
+            }
+            .order-tablet-12 {
+                order: 12;
+            }
+    }
+
+@media (min-width: 600px) {
+        .width-tablet-s-auto {
+            flex: 0 0 auto;
+            width: auto;
+            max-width: none;
+        }
+
+        .width-tablet-s-available {
+            flex-basis: auto;
+            min-height: auto;
+            height: auto;
+        }
+            .width-tablet-s-1 {
+                flex: 0 0 calc(var(--grid-col-width) * 1);
+                max-width: calc(var(--grid-col-width) * 1);
+            }
+            .width-tablet-s-2 {
+                flex: 0 0 calc(var(--grid-col-width) * 2);
+                max-width: calc(var(--grid-col-width) * 2);
+            }
+            .width-tablet-s-3 {
+                flex: 0 0 calc(var(--grid-col-width) * 3);
+                max-width: calc(var(--grid-col-width) * 3);
+            }
+            .width-tablet-s-4 {
+                flex: 0 0 calc(var(--grid-col-width) * 4);
+                max-width: calc(var(--grid-col-width) * 4);
+            }
+            .width-tablet-s-5 {
+                flex: 0 0 calc(var(--grid-col-width) * 5);
+                max-width: calc(var(--grid-col-width) * 5);
+            }
+            .width-tablet-s-6 {
+                flex: 0 0 calc(var(--grid-col-width) * 6);
+                max-width: calc(var(--grid-col-width) * 6);
+            }
+            .width-tablet-s-7 {
+                flex: 0 0 calc(var(--grid-col-width) * 7);
+                max-width: calc(var(--grid-col-width) * 7);
+            }
+            .width-tablet-s-8 {
+                flex: 0 0 calc(var(--grid-col-width) * 8);
+                max-width: calc(var(--grid-col-width) * 8);
+            }
+            .width-tablet-s-9 {
+                flex: 0 0 calc(var(--grid-col-width) * 9);
+                max-width: calc(var(--grid-col-width) * 9);
+            }
+            .width-tablet-s-10 {
+                flex: 0 0 calc(var(--grid-col-width) * 10);
+                max-width: calc(var(--grid-col-width) * 10);
+            }
+            .width-tablet-s-11 {
+                flex: 0 0 calc(var(--grid-col-width) * 11);
+                max-width: calc(var(--grid-col-width) * 11);
+            }
+            .width-tablet-s-12 {
+                flex: 0 0 calc(var(--grid-col-width) * 12);
+                max-width: calc(var(--grid-col-width) * 12);
+            }
+            .offset-tablet-s-1 {
+                margin-left: calc(var(--grid-col-width) * 1);
+            }
+            .offset-tablet-s-2 {
+                margin-left: calc(var(--grid-col-width) * 2);
+            }
+            .offset-tablet-s-3 {
+                margin-left: calc(var(--grid-col-width) * 3);
+            }
+            .offset-tablet-s-4 {
+                margin-left: calc(var(--grid-col-width) * 4);
+            }
+            .offset-tablet-s-5 {
+                margin-left: calc(var(--grid-col-width) * 5);
+            }
+            .offset-tablet-s-6 {
+                margin-left: calc(var(--grid-col-width) * 6);
+            }
+            .offset-tablet-s-7 {
+                margin-left: calc(var(--grid-col-width) * 7);
+            }
+            .offset-tablet-s-8 {
+                margin-left: calc(var(--grid-col-width) * 8);
+            }
+            .offset-tablet-s-9 {
+                margin-left: calc(var(--grid-col-width) * 9);
+            }
+            .offset-tablet-s-10 {
+                margin-left: calc(var(--grid-col-width) * 10);
+            }
+            .offset-tablet-s-11 {
+                margin-left: calc(var(--grid-col-width) * 11);
+            }
+
+        .order-tablet-s-first {
+            order: -1;
+        }
+
+        .order-tablet-s-last {
+            order: 13;
+        }
+            .order-tablet-s-1 {
+                order: 1;
+            }
+            .order-tablet-s-2 {
+                order: 2;
+            }
+            .order-tablet-s-3 {
+                order: 3;
+            }
+            .order-tablet-s-4 {
+                order: 4;
+            }
+            .order-tablet-s-5 {
+                order: 5;
+            }
+            .order-tablet-s-6 {
+                order: 6;
+            }
+            .order-tablet-s-7 {
+                order: 7;
+            }
+            .order-tablet-s-8 {
+                order: 8;
+            }
+            .order-tablet-s-9 {
+                order: 9;
+            }
+            .order-tablet-s-10 {
+                order: 10;
+            }
+            .order-tablet-s-11 {
+                order: 11;
+            }
+            .order-tablet-s-12 {
+                order: 12;
+            }
+    }
+
+@media (min-width: 768px) {
+        .width-tablet-m-auto {
+            flex: 0 0 auto;
+            width: auto;
+            max-width: none;
+        }
+
+        .width-tablet-m-available {
+            flex-basis: auto;
+            min-height: auto;
+            height: auto;
+        }
+            .width-tablet-m-1 {
+                flex: 0 0 calc(var(--grid-col-width) * 1);
+                max-width: calc(var(--grid-col-width) * 1);
+            }
+            .width-tablet-m-2 {
+                flex: 0 0 calc(var(--grid-col-width) * 2);
+                max-width: calc(var(--grid-col-width) * 2);
+            }
+            .width-tablet-m-3 {
+                flex: 0 0 calc(var(--grid-col-width) * 3);
+                max-width: calc(var(--grid-col-width) * 3);
+            }
+            .width-tablet-m-4 {
+                flex: 0 0 calc(var(--grid-col-width) * 4);
+                max-width: calc(var(--grid-col-width) * 4);
+            }
+            .width-tablet-m-5 {
+                flex: 0 0 calc(var(--grid-col-width) * 5);
+                max-width: calc(var(--grid-col-width) * 5);
+            }
+            .width-tablet-m-6 {
+                flex: 0 0 calc(var(--grid-col-width) * 6);
+                max-width: calc(var(--grid-col-width) * 6);
+            }
+            .width-tablet-m-7 {
+                flex: 0 0 calc(var(--grid-col-width) * 7);
+                max-width: calc(var(--grid-col-width) * 7);
+            }
+            .width-tablet-m-8 {
+                flex: 0 0 calc(var(--grid-col-width) * 8);
+                max-width: calc(var(--grid-col-width) * 8);
+            }
+            .width-tablet-m-9 {
+                flex: 0 0 calc(var(--grid-col-width) * 9);
+                max-width: calc(var(--grid-col-width) * 9);
+            }
+            .width-tablet-m-10 {
+                flex: 0 0 calc(var(--grid-col-width) * 10);
+                max-width: calc(var(--grid-col-width) * 10);
+            }
+            .width-tablet-m-11 {
+                flex: 0 0 calc(var(--grid-col-width) * 11);
+                max-width: calc(var(--grid-col-width) * 11);
+            }
+            .width-tablet-m-12 {
+                flex: 0 0 calc(var(--grid-col-width) * 12);
+                max-width: calc(var(--grid-col-width) * 12);
+            }
+            .offset-tablet-m-1 {
+                margin-left: calc(var(--grid-col-width) * 1);
+            }
+            .offset-tablet-m-2 {
+                margin-left: calc(var(--grid-col-width) * 2);
+            }
+            .offset-tablet-m-3 {
+                margin-left: calc(var(--grid-col-width) * 3);
+            }
+            .offset-tablet-m-4 {
+                margin-left: calc(var(--grid-col-width) * 4);
+            }
+            .offset-tablet-m-5 {
+                margin-left: calc(var(--grid-col-width) * 5);
+            }
+            .offset-tablet-m-6 {
+                margin-left: calc(var(--grid-col-width) * 6);
+            }
+            .offset-tablet-m-7 {
+                margin-left: calc(var(--grid-col-width) * 7);
+            }
+            .offset-tablet-m-8 {
+                margin-left: calc(var(--grid-col-width) * 8);
+            }
+            .offset-tablet-m-9 {
+                margin-left: calc(var(--grid-col-width) * 9);
+            }
+            .offset-tablet-m-10 {
+                margin-left: calc(var(--grid-col-width) * 10);
+            }
+            .offset-tablet-m-11 {
+                margin-left: calc(var(--grid-col-width) * 11);
+            }
+
+        .order-tablet-m-first {
+            order: -1;
+        }
+
+        .order-tablet-m-last {
+            order: 13;
+        }
+            .order-tablet-m-1 {
+                order: 1;
+            }
+            .order-tablet-m-2 {
+                order: 2;
+            }
+            .order-tablet-m-3 {
+                order: 3;
+            }
+            .order-tablet-m-4 {
+                order: 4;
+            }
+            .order-tablet-m-5 {
+                order: 5;
+            }
+            .order-tablet-m-6 {
+                order: 6;
+            }
+            .order-tablet-m-7 {
+                order: 7;
+            }
+            .order-tablet-m-8 {
+                order: 8;
+            }
+            .order-tablet-m-9 {
+                order: 9;
+            }
+            .order-tablet-m-10 {
+                order: 10;
+            }
+            .order-tablet-m-11 {
+                order: 11;
+            }
+            .order-tablet-m-12 {
+                order: 12;
+            }
+    }
+
+@media (min-width: 1024px) {
+        .width-desktop-auto {
+            flex: 0 0 auto;
+            width: auto;
+            max-width: none;
+        }
+
+        .width-desktop-available {
+            flex-basis: auto;
+            min-height: auto;
+            height: auto;
+        }
+            .width-desktop-1 {
+                flex: 0 0 calc(var(--grid-col-width) * 1);
+                max-width: calc(var(--grid-col-width) * 1);
+            }
+            .width-desktop-2 {
+                flex: 0 0 calc(var(--grid-col-width) * 2);
+                max-width: calc(var(--grid-col-width) * 2);
+            }
+            .width-desktop-3 {
+                flex: 0 0 calc(var(--grid-col-width) * 3);
+                max-width: calc(var(--grid-col-width) * 3);
+            }
+            .width-desktop-4 {
+                flex: 0 0 calc(var(--grid-col-width) * 4);
+                max-width: calc(var(--grid-col-width) * 4);
+            }
+            .width-desktop-5 {
+                flex: 0 0 calc(var(--grid-col-width) * 5);
+                max-width: calc(var(--grid-col-width) * 5);
+            }
+            .width-desktop-6 {
+                flex: 0 0 calc(var(--grid-col-width) * 6);
+                max-width: calc(var(--grid-col-width) * 6);
+            }
+            .width-desktop-7 {
+                flex: 0 0 calc(var(--grid-col-width) * 7);
+                max-width: calc(var(--grid-col-width) * 7);
+            }
+            .width-desktop-8 {
+                flex: 0 0 calc(var(--grid-col-width) * 8);
+                max-width: calc(var(--grid-col-width) * 8);
+            }
+            .width-desktop-9 {
+                flex: 0 0 calc(var(--grid-col-width) * 9);
+                max-width: calc(var(--grid-col-width) * 9);
+            }
+            .width-desktop-10 {
+                flex: 0 0 calc(var(--grid-col-width) * 10);
+                max-width: calc(var(--grid-col-width) * 10);
+            }
+            .width-desktop-11 {
+                flex: 0 0 calc(var(--grid-col-width) * 11);
+                max-width: calc(var(--grid-col-width) * 11);
+            }
+            .width-desktop-12 {
+                flex: 0 0 calc(var(--grid-col-width) * 12);
+                max-width: calc(var(--grid-col-width) * 12);
+            }
+            .offset-desktop-1 {
+                margin-left: calc(var(--grid-col-width) * 1);
+            }
+            .offset-desktop-2 {
+                margin-left: calc(var(--grid-col-width) * 2);
+            }
+            .offset-desktop-3 {
+                margin-left: calc(var(--grid-col-width) * 3);
+            }
+            .offset-desktop-4 {
+                margin-left: calc(var(--grid-col-width) * 4);
+            }
+            .offset-desktop-5 {
+                margin-left: calc(var(--grid-col-width) * 5);
+            }
+            .offset-desktop-6 {
+                margin-left: calc(var(--grid-col-width) * 6);
+            }
+            .offset-desktop-7 {
+                margin-left: calc(var(--grid-col-width) * 7);
+            }
+            .offset-desktop-8 {
+                margin-left: calc(var(--grid-col-width) * 8);
+            }
+            .offset-desktop-9 {
+                margin-left: calc(var(--grid-col-width) * 9);
+            }
+            .offset-desktop-10 {
+                margin-left: calc(var(--grid-col-width) * 10);
+            }
+            .offset-desktop-11 {
+                margin-left: calc(var(--grid-col-width) * 11);
+            }
+
+        .order-desktop-first {
+            order: -1;
+        }
+
+        .order-desktop-last {
+            order: 13;
+        }
+            .order-desktop-1 {
+                order: 1;
+            }
+            .order-desktop-2 {
+                order: 2;
+            }
+            .order-desktop-3 {
+                order: 3;
+            }
+            .order-desktop-4 {
+                order: 4;
+            }
+            .order-desktop-5 {
+                order: 5;
+            }
+            .order-desktop-6 {
+                order: 6;
+            }
+            .order-desktop-7 {
+                order: 7;
+            }
+            .order-desktop-8 {
+                order: 8;
+            }
+            .order-desktop-9 {
+                order: 9;
+            }
+            .order-desktop-10 {
+                order: 10;
+            }
+            .order-desktop-11 {
+                order: 11;
+            }
+            .order-desktop-12 {
+                order: 12;
+            }
+    }
+
+@media (min-width: 1024px) {
+        .width-desktop-s-auto {
+            flex: 0 0 auto;
+            width: auto;
+            max-width: none;
+        }
+
+        .width-desktop-s-available {
+            flex-basis: auto;
+            min-height: auto;
+            height: auto;
+        }
+            .width-desktop-s-1 {
+                flex: 0 0 calc(var(--grid-col-width) * 1);
+                max-width: calc(var(--grid-col-width) * 1);
+            }
+            .width-desktop-s-2 {
+                flex: 0 0 calc(var(--grid-col-width) * 2);
+                max-width: calc(var(--grid-col-width) * 2);
+            }
+            .width-desktop-s-3 {
+                flex: 0 0 calc(var(--grid-col-width) * 3);
+                max-width: calc(var(--grid-col-width) * 3);
+            }
+            .width-desktop-s-4 {
+                flex: 0 0 calc(var(--grid-col-width) * 4);
+                max-width: calc(var(--grid-col-width) * 4);
+            }
+            .width-desktop-s-5 {
+                flex: 0 0 calc(var(--grid-col-width) * 5);
+                max-width: calc(var(--grid-col-width) * 5);
+            }
+            .width-desktop-s-6 {
+                flex: 0 0 calc(var(--grid-col-width) * 6);
+                max-width: calc(var(--grid-col-width) * 6);
+            }
+            .width-desktop-s-7 {
+                flex: 0 0 calc(var(--grid-col-width) * 7);
+                max-width: calc(var(--grid-col-width) * 7);
+            }
+            .width-desktop-s-8 {
+                flex: 0 0 calc(var(--grid-col-width) * 8);
+                max-width: calc(var(--grid-col-width) * 8);
+            }
+            .width-desktop-s-9 {
+                flex: 0 0 calc(var(--grid-col-width) * 9);
+                max-width: calc(var(--grid-col-width) * 9);
+            }
+            .width-desktop-s-10 {
+                flex: 0 0 calc(var(--grid-col-width) * 10);
+                max-width: calc(var(--grid-col-width) * 10);
+            }
+            .width-desktop-s-11 {
+                flex: 0 0 calc(var(--grid-col-width) * 11);
+                max-width: calc(var(--grid-col-width) * 11);
+            }
+            .width-desktop-s-12 {
+                flex: 0 0 calc(var(--grid-col-width) * 12);
+                max-width: calc(var(--grid-col-width) * 12);
+            }
+            .offset-desktop-s-1 {
+                margin-left: calc(var(--grid-col-width) * 1);
+            }
+            .offset-desktop-s-2 {
+                margin-left: calc(var(--grid-col-width) * 2);
+            }
+            .offset-desktop-s-3 {
+                margin-left: calc(var(--grid-col-width) * 3);
+            }
+            .offset-desktop-s-4 {
+                margin-left: calc(var(--grid-col-width) * 4);
+            }
+            .offset-desktop-s-5 {
+                margin-left: calc(var(--grid-col-width) * 5);
+            }
+            .offset-desktop-s-6 {
+                margin-left: calc(var(--grid-col-width) * 6);
+            }
+            .offset-desktop-s-7 {
+                margin-left: calc(var(--grid-col-width) * 7);
+            }
+            .offset-desktop-s-8 {
+                margin-left: calc(var(--grid-col-width) * 8);
+            }
+            .offset-desktop-s-9 {
+                margin-left: calc(var(--grid-col-width) * 9);
+            }
+            .offset-desktop-s-10 {
+                margin-left: calc(var(--grid-col-width) * 10);
+            }
+            .offset-desktop-s-11 {
+                margin-left: calc(var(--grid-col-width) * 11);
+            }
+
+        .order-desktop-s-first {
+            order: -1;
+        }
+
+        .order-desktop-s-last {
+            order: 13;
+        }
+            .order-desktop-s-1 {
+                order: 1;
+            }
+            .order-desktop-s-2 {
+                order: 2;
+            }
+            .order-desktop-s-3 {
+                order: 3;
+            }
+            .order-desktop-s-4 {
+                order: 4;
+            }
+            .order-desktop-s-5 {
+                order: 5;
+            }
+            .order-desktop-s-6 {
+                order: 6;
+            }
+            .order-desktop-s-7 {
+                order: 7;
+            }
+            .order-desktop-s-8 {
+                order: 8;
+            }
+            .order-desktop-s-9 {
+                order: 9;
+            }
+            .order-desktop-s-10 {
+                order: 10;
+            }
+            .order-desktop-s-11 {
+                order: 11;
+            }
+            .order-desktop-s-12 {
+                order: 12;
+            }
+    }
+
+@media (min-width: 1280px) {
+        .width-desktop-m-auto {
+            flex: 0 0 auto;
+            width: auto;
+            max-width: none;
+        }
+
+        .width-desktop-m-available {
+            flex-basis: auto;
+            min-height: auto;
+            height: auto;
+        }
+            .width-desktop-m-1 {
+                flex: 0 0 calc(var(--grid-col-width) * 1);
+                max-width: calc(var(--grid-col-width) * 1);
+            }
+            .width-desktop-m-2 {
+                flex: 0 0 calc(var(--grid-col-width) * 2);
+                max-width: calc(var(--grid-col-width) * 2);
+            }
+            .width-desktop-m-3 {
+                flex: 0 0 calc(var(--grid-col-width) * 3);
+                max-width: calc(var(--grid-col-width) * 3);
+            }
+            .width-desktop-m-4 {
+                flex: 0 0 calc(var(--grid-col-width) * 4);
+                max-width: calc(var(--grid-col-width) * 4);
+            }
+            .width-desktop-m-5 {
+                flex: 0 0 calc(var(--grid-col-width) * 5);
+                max-width: calc(var(--grid-col-width) * 5);
+            }
+            .width-desktop-m-6 {
+                flex: 0 0 calc(var(--grid-col-width) * 6);
+                max-width: calc(var(--grid-col-width) * 6);
+            }
+            .width-desktop-m-7 {
+                flex: 0 0 calc(var(--grid-col-width) * 7);
+                max-width: calc(var(--grid-col-width) * 7);
+            }
+            .width-desktop-m-8 {
+                flex: 0 0 calc(var(--grid-col-width) * 8);
+                max-width: calc(var(--grid-col-width) * 8);
+            }
+            .width-desktop-m-9 {
+                flex: 0 0 calc(var(--grid-col-width) * 9);
+                max-width: calc(var(--grid-col-width) * 9);
+            }
+            .width-desktop-m-10 {
+                flex: 0 0 calc(var(--grid-col-width) * 10);
+                max-width: calc(var(--grid-col-width) * 10);
+            }
+            .width-desktop-m-11 {
+                flex: 0 0 calc(var(--grid-col-width) * 11);
+                max-width: calc(var(--grid-col-width) * 11);
+            }
+            .width-desktop-m-12 {
+                flex: 0 0 calc(var(--grid-col-width) * 12);
+                max-width: calc(var(--grid-col-width) * 12);
+            }
+            .offset-desktop-m-1 {
+                margin-left: calc(var(--grid-col-width) * 1);
+            }
+            .offset-desktop-m-2 {
+                margin-left: calc(var(--grid-col-width) * 2);
+            }
+            .offset-desktop-m-3 {
+                margin-left: calc(var(--grid-col-width) * 3);
+            }
+            .offset-desktop-m-4 {
+                margin-left: calc(var(--grid-col-width) * 4);
+            }
+            .offset-desktop-m-5 {
+                margin-left: calc(var(--grid-col-width) * 5);
+            }
+            .offset-desktop-m-6 {
+                margin-left: calc(var(--grid-col-width) * 6);
+            }
+            .offset-desktop-m-7 {
+                margin-left: calc(var(--grid-col-width) * 7);
+            }
+            .offset-desktop-m-8 {
+                margin-left: calc(var(--grid-col-width) * 8);
+            }
+            .offset-desktop-m-9 {
+                margin-left: calc(var(--grid-col-width) * 9);
+            }
+            .offset-desktop-m-10 {
+                margin-left: calc(var(--grid-col-width) * 10);
+            }
+            .offset-desktop-m-11 {
+                margin-left: calc(var(--grid-col-width) * 11);
+            }
+
+        .order-desktop-m-first {
+            order: -1;
+        }
+
+        .order-desktop-m-last {
+            order: 13;
+        }
+            .order-desktop-m-1 {
+                order: 1;
+            }
+            .order-desktop-m-2 {
+                order: 2;
+            }
+            .order-desktop-m-3 {
+                order: 3;
+            }
+            .order-desktop-m-4 {
+                order: 4;
+            }
+            .order-desktop-m-5 {
+                order: 5;
+            }
+            .order-desktop-m-6 {
+                order: 6;
+            }
+            .order-desktop-m-7 {
+                order: 7;
+            }
+            .order-desktop-m-8 {
+                order: 8;
+            }
+            .order-desktop-m-9 {
+                order: 9;
+            }
+            .order-desktop-m-10 {
+                order: 10;
+            }
+            .order-desktop-m-11 {
+                order: 11;
+            }
+            .order-desktop-m-12 {
+                order: 12;
+            }
+    }
+
+@media (min-width: 1440px) {
+        .width-desktop-l-auto {
+            flex: 0 0 auto;
+            width: auto;
+            max-width: none;
+        }
+
+        .width-desktop-l-available {
+            flex-basis: auto;
+            min-height: auto;
+            height: auto;
+        }
+            .width-desktop-l-1 {
+                flex: 0 0 calc(var(--grid-col-width) * 1);
+                max-width: calc(var(--grid-col-width) * 1);
+            }
+            .width-desktop-l-2 {
+                flex: 0 0 calc(var(--grid-col-width) * 2);
+                max-width: calc(var(--grid-col-width) * 2);
+            }
+            .width-desktop-l-3 {
+                flex: 0 0 calc(var(--grid-col-width) * 3);
+                max-width: calc(var(--grid-col-width) * 3);
+            }
+            .width-desktop-l-4 {
+                flex: 0 0 calc(var(--grid-col-width) * 4);
+                max-width: calc(var(--grid-col-width) * 4);
+            }
+            .width-desktop-l-5 {
+                flex: 0 0 calc(var(--grid-col-width) * 5);
+                max-width: calc(var(--grid-col-width) * 5);
+            }
+            .width-desktop-l-6 {
+                flex: 0 0 calc(var(--grid-col-width) * 6);
+                max-width: calc(var(--grid-col-width) * 6);
+            }
+            .width-desktop-l-7 {
+                flex: 0 0 calc(var(--grid-col-width) * 7);
+                max-width: calc(var(--grid-col-width) * 7);
+            }
+            .width-desktop-l-8 {
+                flex: 0 0 calc(var(--grid-col-width) * 8);
+                max-width: calc(var(--grid-col-width) * 8);
+            }
+            .width-desktop-l-9 {
+                flex: 0 0 calc(var(--grid-col-width) * 9);
+                max-width: calc(var(--grid-col-width) * 9);
+            }
+            .width-desktop-l-10 {
+                flex: 0 0 calc(var(--grid-col-width) * 10);
+                max-width: calc(var(--grid-col-width) * 10);
+            }
+            .width-desktop-l-11 {
+                flex: 0 0 calc(var(--grid-col-width) * 11);
+                max-width: calc(var(--grid-col-width) * 11);
+            }
+            .width-desktop-l-12 {
+                flex: 0 0 calc(var(--grid-col-width) * 12);
+                max-width: calc(var(--grid-col-width) * 12);
+            }
+            .offset-desktop-l-1 {
+                margin-left: calc(var(--grid-col-width) * 1);
+            }
+            .offset-desktop-l-2 {
+                margin-left: calc(var(--grid-col-width) * 2);
+            }
+            .offset-desktop-l-3 {
+                margin-left: calc(var(--grid-col-width) * 3);
+            }
+            .offset-desktop-l-4 {
+                margin-left: calc(var(--grid-col-width) * 4);
+            }
+            .offset-desktop-l-5 {
+                margin-left: calc(var(--grid-col-width) * 5);
+            }
+            .offset-desktop-l-6 {
+                margin-left: calc(var(--grid-col-width) * 6);
+            }
+            .offset-desktop-l-7 {
+                margin-left: calc(var(--grid-col-width) * 7);
+            }
+            .offset-desktop-l-8 {
+                margin-left: calc(var(--grid-col-width) * 8);
+            }
+            .offset-desktop-l-9 {
+                margin-left: calc(var(--grid-col-width) * 9);
+            }
+            .offset-desktop-l-10 {
+                margin-left: calc(var(--grid-col-width) * 10);
+            }
+            .offset-desktop-l-11 {
+                margin-left: calc(var(--grid-col-width) * 11);
+            }
+
+        .order-desktop-l-first {
+            order: -1;
+        }
+
+        .order-desktop-l-last {
+            order: 13;
+        }
+            .order-desktop-l-1 {
+                order: 1;
+            }
+            .order-desktop-l-2 {
+                order: 2;
+            }
+            .order-desktop-l-3 {
+                order: 3;
+            }
+            .order-desktop-l-4 {
+                order: 4;
+            }
+            .order-desktop-l-5 {
+                order: 5;
+            }
+            .order-desktop-l-6 {
+                order: 6;
+            }
+            .order-desktop-l-7 {
+                order: 7;
+            }
+            .order-desktop-l-8 {
+                order: 8;
+            }
+            .order-desktop-l-9 {
+                order: 9;
+            }
+            .order-desktop-l-10 {
+                order: 10;
+            }
+            .order-desktop-l-11 {
+                order: 11;
+            }
+            .order-desktop-l-12 {
+                order: 12;
+            }
+    }
+
+@media (min-width: 1920px) {
+        .width-desktop-xl-auto {
+            flex: 0 0 auto;
+            width: auto;
+            max-width: none;
+        }
+
+        .width-desktop-xl-available {
+            flex-basis: auto;
+            min-height: auto;
+            height: auto;
+        }
+            .width-desktop-xl-1 {
+                flex: 0 0 calc(var(--grid-col-width) * 1);
+                max-width: calc(var(--grid-col-width) * 1);
+            }
+            .width-desktop-xl-2 {
+                flex: 0 0 calc(var(--grid-col-width) * 2);
+                max-width: calc(var(--grid-col-width) * 2);
+            }
+            .width-desktop-xl-3 {
+                flex: 0 0 calc(var(--grid-col-width) * 3);
+                max-width: calc(var(--grid-col-width) * 3);
+            }
+            .width-desktop-xl-4 {
+                flex: 0 0 calc(var(--grid-col-width) * 4);
+                max-width: calc(var(--grid-col-width) * 4);
+            }
+            .width-desktop-xl-5 {
+                flex: 0 0 calc(var(--grid-col-width) * 5);
+                max-width: calc(var(--grid-col-width) * 5);
+            }
+            .width-desktop-xl-6 {
+                flex: 0 0 calc(var(--grid-col-width) * 6);
+                max-width: calc(var(--grid-col-width) * 6);
+            }
+            .width-desktop-xl-7 {
+                flex: 0 0 calc(var(--grid-col-width) * 7);
+                max-width: calc(var(--grid-col-width) * 7);
+            }
+            .width-desktop-xl-8 {
+                flex: 0 0 calc(var(--grid-col-width) * 8);
+                max-width: calc(var(--grid-col-width) * 8);
+            }
+            .width-desktop-xl-9 {
+                flex: 0 0 calc(var(--grid-col-width) * 9);
+                max-width: calc(var(--grid-col-width) * 9);
+            }
+            .width-desktop-xl-10 {
+                flex: 0 0 calc(var(--grid-col-width) * 10);
+                max-width: calc(var(--grid-col-width) * 10);
+            }
+            .width-desktop-xl-11 {
+                flex: 0 0 calc(var(--grid-col-width) * 11);
+                max-width: calc(var(--grid-col-width) * 11);
+            }
+            .width-desktop-xl-12 {
+                flex: 0 0 calc(var(--grid-col-width) * 12);
+                max-width: calc(var(--grid-col-width) * 12);
+            }
+            .offset-desktop-xl-1 {
+                margin-left: calc(var(--grid-col-width) * 1);
+            }
+            .offset-desktop-xl-2 {
+                margin-left: calc(var(--grid-col-width) * 2);
+            }
+            .offset-desktop-xl-3 {
+                margin-left: calc(var(--grid-col-width) * 3);
+            }
+            .offset-desktop-xl-4 {
+                margin-left: calc(var(--grid-col-width) * 4);
+            }
+            .offset-desktop-xl-5 {
+                margin-left: calc(var(--grid-col-width) * 5);
+            }
+            .offset-desktop-xl-6 {
+                margin-left: calc(var(--grid-col-width) * 6);
+            }
+            .offset-desktop-xl-7 {
+                margin-left: calc(var(--grid-col-width) * 7);
+            }
+            .offset-desktop-xl-8 {
+                margin-left: calc(var(--grid-col-width) * 8);
+            }
+            .offset-desktop-xl-9 {
+                margin-left: calc(var(--grid-col-width) * 9);
+            }
+            .offset-desktop-xl-10 {
+                margin-left: calc(var(--grid-col-width) * 10);
+            }
+            .offset-desktop-xl-11 {
+                margin-left: calc(var(--grid-col-width) * 11);
+            }
+
+        .order-desktop-xl-first {
+            order: -1;
+        }
+
+        .order-desktop-xl-last {
+            order: 13;
+        }
+            .order-desktop-xl-1 {
+                order: 1;
+            }
+            .order-desktop-xl-2 {
+                order: 2;
+            }
+            .order-desktop-xl-3 {
+                order: 3;
+            }
+            .order-desktop-xl-4 {
+                order: 4;
+            }
+            .order-desktop-xl-5 {
+                order: 5;
+            }
+            .order-desktop-xl-6 {
+                order: 6;
+            }
+            .order-desktop-xl-7 {
+                order: 7;
+            }
+            .order-desktop-xl-8 {
+                order: 8;
+            }
+            .order-desktop-xl-9 {
+                order: 9;
+            }
+            .order-desktop-xl-10 {
+                order: 10;
+            }
+            .order-desktop-xl-11 {
+                order: 11;
+            }
+            .order-desktop-xl-12 {
+                order: 12;
+            }
+    }