@jetbrains/kotlin-web-site-ui 0.0.0-foundation-changes.1

package/out/components/grid/index.css

@@ -0,0 +1,1081 @@
+:root {
+    --ktl-grid-container-width-desktop: 1480px;
+    --ktl-grid-container-width-tablet: 960px;
+    --ktl-grid-container-width-mobile: 100%;
+    --ktl-grid-gutter: 32px;
+    --ktl-grid-gutter-half: calc(var(--ktl-grid-gutter) / 2);
+    --ktl-grid-gutter-mobile: 16px;
+    --ktl-grid-gutter-mobile-half: calc(var(--ktl-grid-gutter-mobile) / 2);
+    --ktl-grid-elements: 12;
+    --ktl-grid-col-size: calc(100% / var(--ktl-grid-elements));
+}
+
+.ktl-col {
+        padding-right: var(--ktl-grid-gutter-half);
+        padding-left: var(--ktl-grid-gutter-half);
+        flex-grow: 1;
+        flex-basis: 0;
+        max-width: 100%;
+    }
+
+@media (max-width: 767px) {
+
+.ktl-col {
+            padding-right: var(--ktl-grid-gutter-mobile-half);
+            padding-left: var(--ktl-grid-gutter-mobile-half)
+    }
+        }
+
+.ktl-col-1 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 1);
+            max-width: calc(var(--ktl-grid-col-size) * 1);
+        }
+
+@media (max-width: 767px) {
+
+.ktl-col-1 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+
+.ktl-col-offset-1 {
+            margin-left: calc(var(--ktl-grid-col-size) * 1);
+        }
+
+.ktl-col-2 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 2);
+            max-width: calc(var(--ktl-grid-col-size) * 2);
+        }
+
+@media (max-width: 767px) {
+
+.ktl-col-2 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+
+.ktl-col-offset-2 {
+            margin-left: calc(var(--ktl-grid-col-size) * 2);
+        }
+
+.ktl-col-3 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 3);
+            max-width: calc(var(--ktl-grid-col-size) * 3);
+        }
+
+@media (max-width: 767px) {
+
+.ktl-col-3 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+
+.ktl-col-offset-3 {
+            margin-left: calc(var(--ktl-grid-col-size) * 3);
+        }
+
+.ktl-col-4 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 4);
+            max-width: calc(var(--ktl-grid-col-size) * 4);
+        }
+
+@media (max-width: 767px) {
+
+.ktl-col-4 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+
+.ktl-col-offset-4 {
+            margin-left: calc(var(--ktl-grid-col-size) * 4);
+        }
+
+.ktl-col-5 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 5);
+            max-width: calc(var(--ktl-grid-col-size) * 5);
+        }
+
+@media (max-width: 767px) {
+
+.ktl-col-5 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+
+.ktl-col-offset-5 {
+            margin-left: calc(var(--ktl-grid-col-size) * 5);
+        }
+
+.ktl-col-6 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 6);
+            max-width: calc(var(--ktl-grid-col-size) * 6);
+        }
+
+@media (max-width: 767px) {
+
+.ktl-col-6 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+
+.ktl-col-offset-6 {
+            margin-left: calc(var(--ktl-grid-col-size) * 6);
+        }
+
+.ktl-col-7 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 7);
+            max-width: calc(var(--ktl-grid-col-size) * 7);
+        }
+
+@media (max-width: 767px) {
+
+.ktl-col-7 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+
+.ktl-col-offset-7 {
+            margin-left: calc(var(--ktl-grid-col-size) * 7);
+        }
+
+.ktl-col-8 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 8);
+            max-width: calc(var(--ktl-grid-col-size) * 8);
+        }
+
+@media (max-width: 767px) {
+
+.ktl-col-8 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+
+.ktl-col-offset-8 {
+            margin-left: calc(var(--ktl-grid-col-size) * 8);
+        }
+
+.ktl-col-9 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 9);
+            max-width: calc(var(--ktl-grid-col-size) * 9);
+        }
+
+@media (max-width: 767px) {
+
+.ktl-col-9 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+
+.ktl-col-offset-9 {
+            margin-left: calc(var(--ktl-grid-col-size) * 9);
+        }
+
+.ktl-col-10 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 10);
+            max-width: calc(var(--ktl-grid-col-size) * 10);
+        }
+
+@media (max-width: 767px) {
+
+.ktl-col-10 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+
+.ktl-col-offset-10 {
+            margin-left: calc(var(--ktl-grid-col-size) * 10);
+        }
+
+.ktl-col-11 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 11);
+            max-width: calc(var(--ktl-grid-col-size) * 11);
+        }
+
+@media (max-width: 767px) {
+
+.ktl-col-11 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+
+.ktl-col-offset-11 {
+            margin-left: calc(var(--ktl-grid-col-size) * 11);
+        }
+
+.ktl-col-12 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 12);
+            max-width: calc(var(--ktl-grid-col-size) * 12);
+        }
+
+@media (max-width: 767px) {
+
+.ktl-col-12 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+
+.ktl-col-offset-12 {
+            margin-left: calc(var(--ktl-grid-col-size) * 12);
+        }
+
+@media (min-width: 768px) {
+    .ktl-col-sm {
+        padding-right: var(--ktl-grid-gutter-half);
+        padding-left: var(--ktl-grid-gutter-half);
+        flex-grow: 1;
+        flex-basis: 0;
+        max-width: 100%;
+    }
+         @media (max-width: 767px) {
+    .ktl-col-sm {
+            padding-right: var(--ktl-grid-gutter-mobile-half);
+            padding-left: var(--ktl-grid-gutter-mobile-half)
+    }
+        }
+    .ktl-col-sm-1 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 1);
+            max-width: calc(var(--ktl-grid-col-size) * 1);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-sm-1 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-sm-offset-1 {
+            margin-left: calc(var(--ktl-grid-col-size) * 1);
+        }
+    .ktl-col-sm-2 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 2);
+            max-width: calc(var(--ktl-grid-col-size) * 2);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-sm-2 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-sm-offset-2 {
+            margin-left: calc(var(--ktl-grid-col-size) * 2);
+        }
+    .ktl-col-sm-3 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 3);
+            max-width: calc(var(--ktl-grid-col-size) * 3);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-sm-3 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-sm-offset-3 {
+            margin-left: calc(var(--ktl-grid-col-size) * 3);
+        }
+    .ktl-col-sm-4 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 4);
+            max-width: calc(var(--ktl-grid-col-size) * 4);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-sm-4 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-sm-offset-4 {
+            margin-left: calc(var(--ktl-grid-col-size) * 4);
+        }
+    .ktl-col-sm-5 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 5);
+            max-width: calc(var(--ktl-grid-col-size) * 5);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-sm-5 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-sm-offset-5 {
+            margin-left: calc(var(--ktl-grid-col-size) * 5);
+        }
+    .ktl-col-sm-6 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 6);
+            max-width: calc(var(--ktl-grid-col-size) * 6);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-sm-6 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-sm-offset-6 {
+            margin-left: calc(var(--ktl-grid-col-size) * 6);
+        }
+    .ktl-col-sm-7 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 7);
+            max-width: calc(var(--ktl-grid-col-size) * 7);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-sm-7 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-sm-offset-7 {
+            margin-left: calc(var(--ktl-grid-col-size) * 7);
+        }
+    .ktl-col-sm-8 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 8);
+            max-width: calc(var(--ktl-grid-col-size) * 8);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-sm-8 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-sm-offset-8 {
+            margin-left: calc(var(--ktl-grid-col-size) * 8);
+        }
+    .ktl-col-sm-9 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 9);
+            max-width: calc(var(--ktl-grid-col-size) * 9);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-sm-9 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-sm-offset-9 {
+            margin-left: calc(var(--ktl-grid-col-size) * 9);
+        }
+    .ktl-col-sm-10 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 10);
+            max-width: calc(var(--ktl-grid-col-size) * 10);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-sm-10 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-sm-offset-10 {
+            margin-left: calc(var(--ktl-grid-col-size) * 10);
+        }
+    .ktl-col-sm-11 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 11);
+            max-width: calc(var(--ktl-grid-col-size) * 11);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-sm-11 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-sm-offset-11 {
+            margin-left: calc(var(--ktl-grid-col-size) * 11);
+        }
+    .ktl-col-sm-12 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 12);
+            max-width: calc(var(--ktl-grid-col-size) * 12);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-sm-12 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-sm-offset-12 {
+            margin-left: calc(var(--ktl-grid-col-size) * 12);
+        }
+}
+
+@media (min-width: 1024px) {
+    .ktl-col-md {
+        padding-right: var(--ktl-grid-gutter-half);
+        padding-left: var(--ktl-grid-gutter-half);
+        flex-grow: 1;
+        flex-basis: 0;
+        max-width: 100%;
+    }
+         @media (max-width: 767px) {
+    .ktl-col-md {
+            padding-right: var(--ktl-grid-gutter-mobile-half);
+            padding-left: var(--ktl-grid-gutter-mobile-half)
+    }
+        }
+    .ktl-col-md-1 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 1);
+            max-width: calc(var(--ktl-grid-col-size) * 1);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-md-1 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-md-offset-1 {
+            margin-left: calc(var(--ktl-grid-col-size) * 1);
+        }
+    .ktl-col-md-2 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 2);
+            max-width: calc(var(--ktl-grid-col-size) * 2);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-md-2 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-md-offset-2 {
+            margin-left: calc(var(--ktl-grid-col-size) * 2);
+        }
+    .ktl-col-md-3 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 3);
+            max-width: calc(var(--ktl-grid-col-size) * 3);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-md-3 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-md-offset-3 {
+            margin-left: calc(var(--ktl-grid-col-size) * 3);
+        }
+    .ktl-col-md-4 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 4);
+            max-width: calc(var(--ktl-grid-col-size) * 4);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-md-4 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-md-offset-4 {
+            margin-left: calc(var(--ktl-grid-col-size) * 4);
+        }
+    .ktl-col-md-5 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 5);
+            max-width: calc(var(--ktl-grid-col-size) * 5);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-md-5 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-md-offset-5 {
+            margin-left: calc(var(--ktl-grid-col-size) * 5);
+        }
+    .ktl-col-md-6 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 6);
+            max-width: calc(var(--ktl-grid-col-size) * 6);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-md-6 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-md-offset-6 {
+            margin-left: calc(var(--ktl-grid-col-size) * 6);
+        }
+    .ktl-col-md-7 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 7);
+            max-width: calc(var(--ktl-grid-col-size) * 7);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-md-7 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-md-offset-7 {
+            margin-left: calc(var(--ktl-grid-col-size) * 7);
+        }
+    .ktl-col-md-8 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 8);
+            max-width: calc(var(--ktl-grid-col-size) * 8);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-md-8 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-md-offset-8 {
+            margin-left: calc(var(--ktl-grid-col-size) * 8);
+        }
+    .ktl-col-md-9 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 9);
+            max-width: calc(var(--ktl-grid-col-size) * 9);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-md-9 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-md-offset-9 {
+            margin-left: calc(var(--ktl-grid-col-size) * 9);
+        }
+    .ktl-col-md-10 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 10);
+            max-width: calc(var(--ktl-grid-col-size) * 10);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-md-10 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-md-offset-10 {
+            margin-left: calc(var(--ktl-grid-col-size) * 10);
+        }
+    .ktl-col-md-11 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 11);
+            max-width: calc(var(--ktl-grid-col-size) * 11);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-md-11 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-md-offset-11 {
+            margin-left: calc(var(--ktl-grid-col-size) * 11);
+        }
+    .ktl-col-md-12 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 12);
+            max-width: calc(var(--ktl-grid-col-size) * 12);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-md-12 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-md-offset-12 {
+            margin-left: calc(var(--ktl-grid-col-size) * 12);
+        }
+}
+
+@media (min-width: 1200px) {
+    .ktl-col-lg {
+        padding-right: var(--ktl-grid-gutter-half);
+        padding-left: var(--ktl-grid-gutter-half);
+        flex-grow: 1;
+        flex-basis: 0;
+        max-width: 100%;
+    }
+         @media (max-width: 767px) {
+    .ktl-col-lg {
+            padding-right: var(--ktl-grid-gutter-mobile-half);
+            padding-left: var(--ktl-grid-gutter-mobile-half)
+    }
+        }
+    .ktl-col-lg-1 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 1);
+            max-width: calc(var(--ktl-grid-col-size) * 1);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-lg-1 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-lg-offset-1 {
+            margin-left: calc(var(--ktl-grid-col-size) * 1);
+        }
+    .ktl-col-lg-2 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 2);
+            max-width: calc(var(--ktl-grid-col-size) * 2);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-lg-2 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-lg-offset-2 {
+            margin-left: calc(var(--ktl-grid-col-size) * 2);
+        }
+    .ktl-col-lg-3 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 3);
+            max-width: calc(var(--ktl-grid-col-size) * 3);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-lg-3 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-lg-offset-3 {
+            margin-left: calc(var(--ktl-grid-col-size) * 3);
+        }
+    .ktl-col-lg-4 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 4);
+            max-width: calc(var(--ktl-grid-col-size) * 4);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-lg-4 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-lg-offset-4 {
+            margin-left: calc(var(--ktl-grid-col-size) * 4);
+        }
+    .ktl-col-lg-5 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 5);
+            max-width: calc(var(--ktl-grid-col-size) * 5);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-lg-5 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-lg-offset-5 {
+            margin-left: calc(var(--ktl-grid-col-size) * 5);
+        }
+    .ktl-col-lg-6 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 6);
+            max-width: calc(var(--ktl-grid-col-size) * 6);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-lg-6 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-lg-offset-6 {
+            margin-left: calc(var(--ktl-grid-col-size) * 6);
+        }
+    .ktl-col-lg-7 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 7);
+            max-width: calc(var(--ktl-grid-col-size) * 7);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-lg-7 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-lg-offset-7 {
+            margin-left: calc(var(--ktl-grid-col-size) * 7);
+        }
+    .ktl-col-lg-8 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 8);
+            max-width: calc(var(--ktl-grid-col-size) * 8);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-lg-8 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-lg-offset-8 {
+            margin-left: calc(var(--ktl-grid-col-size) * 8);
+        }
+    .ktl-col-lg-9 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 9);
+            max-width: calc(var(--ktl-grid-col-size) * 9);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-lg-9 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-lg-offset-9 {
+            margin-left: calc(var(--ktl-grid-col-size) * 9);
+        }
+    .ktl-col-lg-10 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 10);
+            max-width: calc(var(--ktl-grid-col-size) * 10);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-lg-10 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-lg-offset-10 {
+            margin-left: calc(var(--ktl-grid-col-size) * 10);
+        }
+    .ktl-col-lg-11 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 11);
+            max-width: calc(var(--ktl-grid-col-size) * 11);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-lg-11 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-lg-offset-11 {
+            margin-left: calc(var(--ktl-grid-col-size) * 11);
+        }
+    .ktl-col-lg-12 {
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            padding-right: var(--ktl-grid-gutter-half);
+            padding-left: var(--ktl-grid-gutter-half);
+            flex-basis: calc(var(--ktl-grid-col-size) * 12);
+            max-width: calc(var(--ktl-grid-col-size) * 12);
+        }
+            @media (max-width: 767px) {
+    .ktl-col-lg-12 {
+        padding-right: var(--ktl-grid-gutter-mobile-half);
+        padding-left: var(--ktl-grid-gutter-mobile-half);
+        }
+    }
+    .ktl-col-lg-offset-12 {
+            margin-left: calc(var(--ktl-grid-col-size) * 12);
+        }
+}
+
+.ktl-container {
+        margin: 0 auto;
+        padding: 0 var(--ktl-grid-gutter-mobile);
+        max-width: var(--ktl-grid-container-width-mobile);
+    }
+
+@media (min-width: 1200px) {
+
+.ktl-container {
+            padding: 0 var(--ktl-grid-gutter);
+            max-width: var(--ktl-grid-container-width-desktop)
+    }
+        }
+
+.ktl-container-fluid {
+        max-width: none;
+    }
+
+.ktl-row {
+        display: flex;
+        margin-left: calc(-1 * var(--ktl-grid-gutter-half));
+        margin-right: calc(-1 * var(--ktl-grid-gutter-half));
+        flex-wrap: wrap;
+        flex-direction: row;
+    }
+
+.ktl-row--reverse {
+            flex-direction: row-reverse;
+        }
+
+@media (max-width: 767px) {
+
+.ktl-row {
+            margin-left: calc(-1 * var(--ktl-grid-gutter-mobile-half));
+            margin-right: calc(-1 * var(--ktl-grid-gutter-mobile-half))
+    }
+        }
+
+.ktl-offset-top-xs {
+        margin-top: 8px;
+    }
+
+.ktl-offset-top-s {
+        margin-top: 16px;
+    }
+
+.ktl-offset-top-m {
+        margin-top: 32px;
+    }
+
+@media (max-width: 767px) {
+
+.ktl-offset-top-m {
+            margin-top: 16px
+    }
+        }
+
+.ktl-offset-top-l {
+        margin-top: 48px;
+    }
+
+@media (max-width: 767px) {
+
+.ktl-offset-top-l {
+            margin-top: 32px
+    }
+        }
+
+.ktl-offset-top-xl {
+        margin-top: 64px;
+    }
+
+@media (max-width: 767px) {
+
+.ktl-offset-top-xl {
+            margin-top: 48px
+    }
+        }
+
+.ktl-offset-top-xxl {
+        margin-top: 96px;
+    }
+
+@media (max-width: 767px) {
+
+.ktl-offset-top-xxl {
+            margin-top: 64px
+    }
+        }
+
+.ktl-offset-bottom-xs {
+        margin-bottom: 8px;
+    }
+
+.ktl-offset-bottom-s {
+        margin-bottom: 16px;
+    }
+
+.ktl-offset-bottom-m {
+        margin-bottom: 32px;
+    }
+
+@media (max-width: 767px) {
+
+.ktl-offset-bottom-m {
+            margin-bottom: 16px
+    }
+        }
+
+.ktl-offset-bottom-l {
+        margin-bottom: 48px;
+    }
+
+@media (max-width: 767px) {
+
+.ktl-offset-bottom-l {
+            margin-bottom: 32px
+    }
+        }
+
+.ktl-offset-bottom-xl {
+        margin-bottom: 64px;
+    }
+
+@media (max-width: 767px) {
+
+.ktl-offset-bottom-xl {
+            margin-bottom: 48px
+    }
+        }
+
+.ktl-offset-bottom-xxl {
+        margin-bottom: 96px;
+    }
+
+@media (max-width: 767px) {
+
+.ktl-offset-bottom-xxl {
+            margin-bottom: 64px
+    }
+        }