@ebrains/react 0.5.0-alpha.0 → 0.7.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{analytics-1cde8e4a.esm.js → analytics-44b1416b.esm.js} +9 -1
- package/color-primary-palette_6.entry.esm.js +106 -106
- package/correct-use-of-colors.entry.esm.js +33 -33
- package/eds-accordion_22.entry.esm.js +269 -0
- package/eds-alert.entry.esm.js +104 -0
- package/eds-app-root.entry.esm.js +53 -0
- package/eds-avatar_4.entry.esm.js +2 -10
- package/eds-breadcrumb.entry.esm.js +171 -0
- package/eds-card-generic.entry.esm.js +7 -17
- package/eds-card-project.entry.esm.js +1 -1
- package/eds-card-section.entry.esm.js +8 -22
- package/eds-card-tool.entry.esm.js +1 -1
- package/eds-components-section.entry.esm.js +1 -1
- package/eds-cookies-preference.entry.esm.js +47 -0
- package/eds-docs-palettes.entry.esm.js +1 -1
- package/eds-docs-tokens.entry.esm.js +1 -1
- package/{eds-dropdown_2.entry.esm.js → eds-dropdown.entry.esm.js} +20 -99
- package/eds-feedback.entry.esm.js +82 -0
- package/eds-form.entry.esm.js +254 -254
- package/eds-frame.entry.esm.js +34 -33
- package/eds-icon-arrow-diagonal.entry.esm.js +1 -1
- package/eds-icon-arrow-right.entry.esm.js +1 -1
- package/eds-icon-bluesky.entry.esm.js +1 -1
- package/eds-icon-chevron-down.entry.esm.js +1 -1
- package/eds-icon-chevron-left.entry.esm.js +1 -1
- package/eds-icon-chevron-right.entry.esm.js +1 -1
- package/eds-icon-chevron-up.entry.esm.js +1 -1
- package/eds-icon-close.entry.esm.js +1 -1
- package/eds-icon-copy.entry.esm.js +1 -1
- package/eds-icon-eu.entry.esm.js +1 -1
- package/eds-icon-facebook.entry.esm.js +1 -1
- package/eds-icon-gitlab.entry.esm.js +1 -1
- package/eds-icon-linkedin.entry.esm.js +1 -1
- package/eds-icon-loader.entry.esm.js +1 -1
- package/eds-icon-mastodon.entry.esm.js +1 -1
- package/eds-icon-menu.entry.esm.js +1 -1
- package/eds-icon-more.entry.esm.js +1 -1
- package/eds-icon-search.entry.esm.js +1 -1
- package/eds-icon-star.entry.esm.js +21 -0
- package/eds-icon-success.entry.esm.js +1 -1
- package/eds-icon-thumbs-down.entry.esm.js +21 -0
- package/eds-icon-thumbs-up.entry.esm.js +21 -0
- package/eds-icon-twitter.entry.esm.js +1 -1
- package/eds-icon-user.entry.esm.js +1 -1
- package/eds-icon-youtube.entry.esm.js +1 -1
- package/{keycloak-d502ec16.esm.js → eds-login_2.entry.esm.js} +172 -1
- package/eds-logo-variations.entry.esm.js +1 -1
- package/eds-modal.entry.esm.js +23 -10
- package/eds-progress-bar.entry.esm.js +2 -2
- package/eds-rating.entry.esm.js +79 -0
- package/eds-section-core_2.entry.esm.js +5 -5
- package/eds-spinner.entry.esm.js +67 -0
- package/eds-steps.entry.esm.js +89 -0
- package/eds-svg-repository.entry.esm.js +8 -2
- package/eds-switch.entry.esm.js +58 -0
- package/eds-tabs.entry.esm.js +15 -27
- package/eds-timeline.entry.esm.js +6 -23
- package/eds-toast-manager.entry.esm.js +62 -0
- package/eds-toast.entry.esm.js +92 -0
- package/eds-tooltip.entry.esm.js +4 -4
- package/eds-trl.entry.esm.js +2 -2
- package/eds-user.entry.esm.js +64 -87
- package/eds-vertical-stepper.entry.esm.js +5 -5
- package/formUtils-ac68474d.esm.js +247 -0
- package/incorrect-use-of-colors.entry.esm.js +7 -7
- package/index.esm.js +1 -1
- package/index.esm2.js +51 -27
- package/logo-space.entry.esm.js +4 -4
- package/logo-variations-horizontal_2.entry.esm.js +26 -26
- package/logo-wrong-usage.entry.esm.js +37 -37
- package/package.json +1 -1
- package/sharedUtils-a550989c.esm.js +17 -0
- package/src/components.d.ts +4 -1
- package/star-0da9b5e9.esm.js +5 -0
- package/thumbs-down-a18fd049.esm.js +5 -0
- package/thumbs-up-c19a71bc.esm.js +6 -0
- package/token-list_3.entry.esm.js +5 -5
- package/token-ratios.entry.esm.js +3 -3
- package/token-spacing.entry.esm.js +26 -26
- package/token-typography.entry.esm.js +2 -2
- package/eds-accordion.entry.esm.js +0 -126
- package/eds-alert_17.entry.esm.js +0 -187
- package/eds-input_7.entry.esm.js +0 -529
- package/eds-login.entry.esm.js +0 -97
- package/eds-matomo-notice.entry.esm.js +0 -128
- package/eds-navigator.entry.esm.js +0 -72
- package/eds-pagination_2.entry.esm.js +0 -472
- package/eds-tab.entry.esm.js +0 -41
- package/eds-tabs-content.entry.esm.js +0 -145
package/eds-form.entry.esm.js
CHANGED
|
@@ -1,135 +1,40 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
|
|
2
2
|
import { t as toast } from './toastManager-d9eee791.esm.js';
|
|
3
|
-
import { s as sendAnalytics } from './analytics-
|
|
3
|
+
import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
|
|
4
|
+
import { p as parseData } from './sharedUtils-a550989c.esm.js';
|
|
5
|
+
import { v as validateFormFields, b as getFormDraftData, a as validateInputField } from './formUtils-ac68474d.esm.js';
|
|
4
6
|
import 'react';
|
|
5
7
|
import 'react/jsx-runtime';
|
|
6
8
|
import 'react-dom';
|
|
7
9
|
|
|
10
|
+
// utils/api.ts
|
|
11
|
+
async function checkResponse(response) {
|
|
12
|
+
const data = await response.json().catch(() => ({}));
|
|
13
|
+
if (!response.ok) {
|
|
14
|
+
// Optionally, throw an error or return a structured error object.
|
|
15
|
+
//throw new Error(data.error || `HTTP error! Status: ${response.status}`);
|
|
16
|
+
return null;
|
|
17
|
+
}
|
|
18
|
+
return data;
|
|
19
|
+
}
|
|
20
|
+
async function post(url, body, options = {}) {
|
|
21
|
+
// If the body is FormData, omit the 'Content-Type' header so the browser sets it correctly.
|
|
22
|
+
const headers = body instanceof FormData ? options.headers || {} : Object.assign({
|
|
23
|
+
'Content-Type': 'application/json'
|
|
24
|
+
}, options.headers);
|
|
25
|
+
const response = await fetch(url, {
|
|
26
|
+
method: 'POST',
|
|
27
|
+
headers,
|
|
28
|
+
body: body instanceof FormData ? body : JSON.stringify(body)
|
|
29
|
+
});
|
|
30
|
+
return checkResponse(response);
|
|
31
|
+
}
|
|
8
32
|
const edsFormCss = "@font-face {\n font-family: \"Inter\";\n font-weight: 100 900;\n font-display: swap;\n font-style: normal;\n src: url(\"../fonts/Inter.var.woff2\") format(\"woff2-variations\"),\n url(\"../fonts/Inter.var.woff2\") format(\"woff2\");\n src: url(\"../fonts/Inter.var.woff2\") format(\"woff2\") tech(\"variations\");\n }\n @font-face {\n font-family: \"Inter\";\n font-weight: 100 900;\n font-display: swap;\n font-style: italic;\n src: url(\"../fonts/Inter-Italic.var.woff2\") format(\"woff2-variations\"),\n url(\"../fonts/Inter-Italic.var.woff2\") format(\"woff2\");\n src: url(\"../fonts/Inter-Italic.var.woff2\") format(\"woff2\") tech(\"variations\");\n }\n :root {\n font-optical-sizing: auto;\n }\n html,\n body {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n /*\n :focus[data-focus-method=\"mouse\"],\n :focus[data-focus-method=\"touch\"] {\n outline: none !important;\n }\n */\n /*FADE*/\n .fade-enter-active,\n .fade-leave-active {\n transition-duration: 300ms;\n transition-timing-function: linear;\n transition-property: opacity;\n }\n .fade-enter-from,\n .fade-leave-to {\n opacity: 0;\n }\n /*FADE TRANSLATE Y*/\n .fade-down-enter-active,\n .fade-down-leave-active {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n \n transition-property: opacity, transform;\n }\n .fade-down-enter-from,\n .fade-down-leave-to {\n opacity: 0;\n transform: translateY(12px);\n }\n /*SLIDE LEFT*/\n .slide-left-enter-active,\n .slide-left-leave-active {\n transition-duration: 500ms;\n transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n transition-property: opacity, transform;\n }\n .slide-left-enter-from,\n .slide-left-leave-to {\n transform: translateX(-110%);\n }\n /*SLIDE BOTTOM*/\n .slide-bottom-enter-active,\n .slide-bottom-leave-active {\n transition-duration: 500ms;\n transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n transition-property: opacity, transform;\n }\n .slide-bottom-enter-from,\n .slide-bottom-leave-to {\n transform: translateY(100%);\n }\n .slide-bottom-list-move,\n .slide-bottom-list-enter-active,\n .slide-bottom-list-leave-active {\n transition-duration: 500ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n transition-property: opacity, transform;\n }\n .slide-bottom-list-enter-from,\n .slide-bottom-list-leave-to {\n opacity: 0;\n transform: translateY(100%);\n }\n .slide-bottom-list-leave-active {\n position: absolute;\n }\n /*COLLAPSE Y*/\n .collapseY-enter-active,\n .collapseY-leave-active {\n transition-duration: 300ms;\n transition-timing-function: linear;\n overflow: hidden;\n max-height: 500px;\n transition-property: max-height;\n }\n .collapseY-enter-from,\n .collapseY-leave-to {\n max-height: 0;\n }\n *, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(147 197 253 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n }\n ::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(147 197 253 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n }\n /*\n ! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com\n */\n /*\n 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n */\n *,\n ::before,\n ::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: currentColor; /* 2 */\n }\n ::before,\n ::after {\n --tw-content: '';\n }\n /*\n 1. Use a consistent sensible line-height in all browsers.\n 2. Prevent adjustments of font size after orientation changes in iOS.\n 3. Use a more readable tab size.\n 4. Use the user's configured `sans` font-family by default.\n 5. Use the user's configured `sans` font-feature-settings by default.\n 6. Use the user's configured `sans` font-variation-settings by default.\n 7. Disable tap highlights on iOS\n */\n html,\n :host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n -moz-tab-size: 4; /* 3 */\n -o-tab-size: 4;\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n font-feature-settings: normal; /* 5 */\n font-variation-settings: normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n }\n /*\n 1. Remove the margin in all browsers.\n 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n */\n body {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n }\n /*\n 1. Add the correct height in Firefox.\n 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n 3. Ensure horizontal rules are visible by default.\n */\n hr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n }\n /*\n Add the correct text decoration in Chrome, Edge, and Safari.\n */\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n /*\n Remove the default font size and weight for headings.\n */\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n /*\n Reset links to optimize for opt-in styling instead of opt-out.\n */\n a {\n color: inherit;\n text-decoration: inherit;\n }\n /*\n Add the correct font weight in Edge and Safari.\n */\n b,\n strong {\n font-weight: bolder;\n }\n /*\n 1. Use the user's configured `mono` font-family by default.\n 2. Use the user's configured `mono` font-feature-settings by default.\n 3. Use the user's configured `mono` font-variation-settings by default.\n 4. Correct the odd `em` font sizing in all browsers.\n */\n code,\n kbd,\n samp,\n pre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n font-feature-settings: normal; /* 2 */\n font-variation-settings: normal; /* 3 */\n font-size: 1em; /* 4 */\n }\n /*\n Add the correct font size in all browsers.\n */\n small {\n font-size: 80%;\n }\n /*\n Prevent `sub` and `sup` elements from affecting the line height in all browsers.\n */\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n /*\n 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n 3. Remove gaps between table borders by default.\n */\n table {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n }\n /*\n 1. Change the font styles in all browsers.\n 2. Remove the margin in Firefox and Safari.\n 3. Remove default padding in all browsers.\n */\n button,\n input,\n optgroup,\n select,\n textarea {\n font-family: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n }\n /*\n Remove the inheritance of text transform in Edge and Firefox.\n */\n button,\n select {\n text-transform: none;\n }\n /*\n 1. Correct the inability to style clickable types in iOS and Safari.\n 2. Remove default button styles.\n */\n button,\n input:where([type='button']),\n input:where([type='reset']),\n input:where([type='submit']) {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n }\n /*\n Use the modern Firefox focus style for all focusable elements.\n */\n :-moz-focusring {\n outline: auto;\n }\n /*\n Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n */\n :-moz-ui-invalid {\n box-shadow: none;\n }\n /*\n Add the correct vertical alignment in Chrome and Firefox.\n */\n progress {\n vertical-align: baseline;\n }\n /*\n Correct the cursor style of increment and decrement buttons in Safari.\n */\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n height: auto;\n }\n /*\n 1. Correct the odd appearance in Chrome and Safari.\n 2. Correct the outline style in Safari.\n */\n [type='search'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n }\n /*\n Remove the inner padding in Chrome and Safari on macOS.\n */\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n /*\n 1. Correct the inability to style clickable types in iOS and Safari.\n 2. Change font properties to `inherit` in Safari.\n */\n ::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n }\n /*\n Add the correct display in Chrome and Safari.\n */\n summary {\n display: list-item;\n }\n /*\n Removes the default spacing and border for appropriate elements.\n */\n blockquote,\n dl,\n dd,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n hr,\n figure,\n p,\n pre {\n margin: 0;\n }\n fieldset {\n margin: 0;\n padding: 0;\n }\n legend {\n padding: 0;\n }\n ol,\n ul,\n menu {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n /*\n Reset default styling for dialogs.\n */\n dialog {\n padding: 0;\n }\n /*\n Prevent resizing textareas horizontally by default.\n */\n textarea {\n resize: vertical;\n }\n /*\n 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n 2. Set the default placeholder color to the user's configured gray 400 color.\n */\n input::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n }\n input::placeholder,\n textarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n }\n /*\n Set the default cursor for buttons.\n */\n button,\n [role=\"button\"] {\n cursor: pointer;\n }\n /*\n Make sure disabled buttons don't get the pointer cursor.\n */\n :disabled {\n cursor: default;\n }\n /*\n 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n */\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n }\n /*\n Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n */\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n /* Make elements with the HTML hidden attribute stay hidden by default */\n [hidden] {\n display: none;\n }\n :root {\n --breakpoint: \"sm\";\n --container-width: unset;\n --inner-gutter: 8px;\n --outer-gutter: 16px;\n --grid-columns: 12;\n --env: \"dev\";\n --grid-column-bg: rgba(127, 255, 255, 0.25);\n }\n @media (min-width: 750px) {\n :root {\n --breakpoint: \"md\";\n --container-width: unset;\n --inner-gutter: 12px;\n --outer-gutter: 20px;\n --grid-columns: 12;\n }\n }\n @media (min-width: 900px) {\n :root {\n --breakpoint: \"lg\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n }\n @media (min-width: 1024px) {\n :root {\n --breakpoint: \"xl\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n }\n @media (min-width: 1280px) {\n :root {\n --breakpoint: \"xxl\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n }\n @media (min-width: 2200px) {\n :root {\n --breakpoint: \"xxxl\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n }\n .container {\n width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));\n margin-right: auto;\n margin-left: auto;\n }\n .container > * {\n --container-outer-gutter: 0;\n --breakout-container-outer-gutter: 0;\n }\n [class*='scrollbar-track-'], [class*='scrollbar-thumb-'] {\n --scrollbar-bg: #fafafa;\n --scrollbar-fg: #c1c1c1;\n --scrollbar-border: #e8e8e8;\n scrollbar-color: var(--scrollbar-fg) var(--scrollbar-bg);\n }\n [class*='scrollbar-track-']::-webkit-scrollbar, [class*='scrollbar-thumb-']::-webkit-scrollbar {\n width: var(--scrollbar-width, 15px);\n height: var(--scrollbar-width, 15px);\n }\n [class*='scrollbar-track-']::-webkit-scrollbar-track, [class*='scrollbar-thumb-']::-webkit-scrollbar-track {\n background: var(--scrollbar-bg);\n }\n [class*='scrollbar-track-']::-webkit-scrollbar-track:horizontal, [class*='scrollbar-thumb-']::-webkit-scrollbar-track:horizontal {\n border-top: 1px solid var(--scrollbar-border);\n border-bottom: 1px solid var(--scrollbar-border);\n }\n [class*='scrollbar-track-']::-webkit-scrollbar-track:vertical, [class*='scrollbar-thumb-']::-webkit-scrollbar-track:vertical {\n border-inline-start: 1px solid var(--scrollbar-border);\n border-inline-end: 1px solid var(--scrollbar-border);\n }\n [class*='scrollbar-track-']::-webkit-scrollbar-thumb, [class*='scrollbar-thumb-']::-webkit-scrollbar-thumb {\n background: var(--scrollbar-fg);\n border-radius: 20px;\n border: var(--scrollbar-padding, 4px) solid transparent;\n background-clip: content-box;\n }\n :root {\n --spacing-space-01: 5rem;\n --spacing-space-02: 3.75rem;\n --spacing-space-03: 6.25rem;\n --spacing-space-04: 1.75rem;\n }\n @media (min-width: 900px) {\n :root {\n --spacing-space-01: 7.5rem;\n --spacing-space-02: 5rem;\n --spacing-space-03: 7.5rem;\n }\n }\n .pt-space-04 {\n padding-top: var(--spacing-space-04);\n }\n :root {\n --sans: Inter, Helvetica, Arial, sans-serif;\n --f-heading-01-fontFamily: var(--sans);\n --f-heading-01-fontWeight: 800;\n --f-heading-01-fontSize: 42px;\n --f-heading-01-lineHeight: 100%;\n --f-heading-01-letterSpacing: -0.01em;\n --f-heading-02-fontFamily: var(--sans);\n --f-heading-02-fontWeight: 800;\n --f-heading-02-fontSize: 36px;\n --f-heading-02-lineHeight: 100%;\n --f-heading-02-letterSpacing: -0.01em;\n --f-heading-03-fontFamily: var(--sans);\n --f-heading-03-fontWeight: 800;\n --f-heading-03-fontSize: 36px;\n --f-heading-03-lineHeight: 100%;\n --f-heading-03-letterSpacing: -0.01em;\n --f-heading-04-fontFamily: var(--sans);\n --f-heading-04-fontWeight: 800;\n --f-heading-04-fontSize: 28px;\n --f-heading-04-lineHeight: 100%;\n --f-heading-04-letterSpacing: -0.01em;\n --f-heading-05-fontFamily: var(--sans);\n --f-heading-05-fontWeight: 800;\n --f-heading-05-fontSize: 28px;\n --f-heading-05-lineHeight: 110%;\n --f-heading-05-letterSpacing: -0.01em;\n --f-heading-06-fontFamily: var(--sans);\n --f-heading-06-fontWeight: 800;\n --f-heading-06-fontSize: 22px;\n --f-heading-06-lineHeight: 120%;\n --f-body-01-fontFamily: var(--sans);\n --f-body-01-fontWeight: 600;\n --f-body-01-fontSize: 20px;\n --f-body-01-lineHeight: 140%;\n --f-body-01-letterSpacing: -0.01em;\n --f-body-02-fontFamily: var(--sans);\n --f-body-02-fontWeight: 600;\n --f-body-02-fontSize: 17px;\n --f-body-02-lineHeight: 150%;\n --f-ui-01-fontFamily: var(--sans);\n --f-ui-01-fontWeight: 800;\n --f-ui-01-fontSize: 18px;\n --f-ui-01-lineHeight: 110%;\n --f-ui-01-letterSpacing: -0.01em;\n --f-ui-02-fontFamily: var(--sans);\n --f-ui-02-fontWeight: 800;\n --f-ui-02-fontSize: 16px;\n --f-ui-02-lineHeight: 110%;\n --f-ui-02-letterSpacing: -0.01em;\n --f-ui-02-light-fontFamily: var(--sans);\n --f-ui-02-light-fontWeight: 600;\n --f-ui-02-light-fontSize: 16px;\n --f-ui-02-light-lineHeight: 110%;\n --f-ui-02-light-letterSpacing: -0.01em;\n --f-ui-03-fontFamily: var(--sans);\n --f-ui-03-fontWeight: 800;\n --f-ui-03-fontSize: 14px;\n --f-ui-03-lineHeight: 110%;\n --f-ui-03-letterSpacing: -0.01em;\n --f-ui-03-light-fontFamily: var(--sans);\n --f-ui-03-light-fontWeight: 600;\n --f-ui-03-light-fontSize: 14px;\n --f-ui-03-light-lineHeight: 130%;\n --f-ui-03-light-letterSpacing: -0.01em;\n --f-ui-04-fontFamily: var(--sans);\n --f-ui-04-fontWeight: 800;\n --f-ui-04-fontSize: 12px;\n --f-ui-04-lineHeight: 100%;\n --f-ui-04-letterSpacing: -0.01em;\n --f-ui-05-fontFamily: var(--sans);\n --f-ui-05-fontWeight: 800;\n --f-ui-05-fontSize: 10px;\n --f-ui-05-lineHeight: 110%;\n --f-ui-05-letterSpacing: -0.01em;\n --f-caption-fontFamily: var(--sans);\n --f-caption-fontWeight: 800;\n --f-caption-fontSize: 12px;\n --f-caption-lineHeight: 120%;\n --f-display-01-fontFamily: var(--sans);\n --f-display-01-fontWeight: 800;\n --f-display-01-fontSize: 120px;\n --f-display-01-lineHeight: 100%;\n --f-display-01-letterSpacing: -0.01em;\n }\n .f-heading-01 {\n font-family: var(--f-heading-01-fontFamily);\n font-weight: var(--f-heading-01-fontWeight);\n font-size: var(--f-heading-01-fontSize);\n line-height: var(--f-heading-01-lineHeight);\n letter-spacing: var(--f-heading-01-letterSpacing);\n }\n .f-heading-02 {\n font-family: var(--f-heading-02-fontFamily);\n font-weight: var(--f-heading-02-fontWeight);\n font-size: var(--f-heading-02-fontSize);\n line-height: var(--f-heading-02-lineHeight);\n letter-spacing: var(--f-heading-02-letterSpacing);\n }\n .f-heading-03 {\n font-family: var(--f-heading-03-fontFamily);\n font-weight: var(--f-heading-03-fontWeight);\n font-size: var(--f-heading-03-fontSize);\n line-height: var(--f-heading-03-lineHeight);\n letter-spacing: var(--f-heading-03-letterSpacing);\n }\n .f-heading-04 {\n font-family: var(--f-heading-04-fontFamily);\n font-weight: var(--f-heading-04-fontWeight);\n font-size: var(--f-heading-04-fontSize);\n line-height: var(--f-heading-04-lineHeight);\n letter-spacing: var(--f-heading-04-letterSpacing);\n }\n .f-heading-05 {\n font-family: var(--f-heading-05-fontFamily);\n font-weight: var(--f-heading-05-fontWeight);\n font-size: var(--f-heading-05-fontSize);\n line-height: var(--f-heading-05-lineHeight);\n letter-spacing: var(--f-heading-05-letterSpacing);\n }\n .f-heading-06 {\n font-family: var(--f-heading-06-fontFamily);\n font-weight: var(--f-heading-06-fontWeight);\n font-size: var(--f-heading-06-fontSize);\n line-height: var(--f-heading-06-lineHeight);\n letter-spacing: var(--f-heading-06-letterSpacing);\n }\n .f-body-01 {\n font-family: var(--f-body-01-fontFamily);\n font-weight: var(--f-body-01-fontWeight);\n font-size: var(--f-body-01-fontSize);\n line-height: var(--f-body-01-lineHeight);\n letter-spacing: var(--f-body-01-letterSpacing);\n }\n .f-body-02 {\n font-family: var(--f-body-02-fontFamily);\n font-weight: var(--f-body-02-fontWeight);\n font-size: var(--f-body-02-fontSize);\n line-height: var(--f-body-02-lineHeight);\n letter-spacing: var(--f-body-02-letterSpacing);\n }\n .f-ui-01 {\n font-family: var(--f-ui-01-fontFamily);\n font-weight: var(--f-ui-01-fontWeight);\n font-size: var(--f-ui-01-fontSize);\n line-height: var(--f-ui-01-lineHeight);\n letter-spacing: var(--f-ui-01-letterSpacing);\n }\n .f-ui-02 {\n font-family: var(--f-ui-02-fontFamily);\n font-weight: var(--f-ui-02-fontWeight);\n font-size: var(--f-ui-02-fontSize);\n line-height: var(--f-ui-02-lineHeight);\n letter-spacing: var(--f-ui-02-letterSpacing);\n }\n .f-ui-02-light {\n font-family: var(--f-ui-02-light-fontFamily);\n font-weight: var(--f-ui-02-light-fontWeight);\n font-size: var(--f-ui-02-light-fontSize);\n line-height: var(--f-ui-02-light-lineHeight);\n letter-spacing: var(--f-ui-02-light-letterSpacing);\n }\n .f-ui-03 {\n font-family: var(--f-ui-03-fontFamily);\n font-weight: var(--f-ui-03-fontWeight);\n font-size: var(--f-ui-03-fontSize);\n line-height: var(--f-ui-03-lineHeight);\n letter-spacing: var(--f-ui-03-letterSpacing);\n }\n .f-ui-03-light {\n font-family: var(--f-ui-03-light-fontFamily);\n font-weight: var(--f-ui-03-light-fontWeight);\n font-size: var(--f-ui-03-light-fontSize);\n line-height: var(--f-ui-03-light-lineHeight);\n letter-spacing: var(--f-ui-03-light-letterSpacing);\n }\n .f-ui-04 {\n font-family: var(--f-ui-04-fontFamily);\n font-weight: var(--f-ui-04-fontWeight);\n font-size: var(--f-ui-04-fontSize);\n line-height: var(--f-ui-04-lineHeight);\n letter-spacing: var(--f-ui-04-letterSpacing);\n }\n .f-ui-05 {\n font-family: var(--f-ui-05-fontFamily);\n font-weight: var(--f-ui-05-fontWeight);\n font-size: var(--f-ui-05-fontSize);\n line-height: var(--f-ui-05-lineHeight);\n letter-spacing: var(--f-ui-05-letterSpacing);\n }\n .f-caption {\n font-family: var(--f-caption-fontFamily);\n font-weight: var(--f-caption-fontWeight);\n font-size: var(--f-caption-fontSize);\n line-height: var(--f-caption-lineHeight);\n letter-spacing: var(--f-caption-letterSpacing);\n }\n .f-display-01 {\n font-family: var(--f-display-01-fontFamily);\n font-weight: var(--f-display-01-fontWeight);\n font-size: var(--f-display-01-fontSize);\n line-height: var(--f-display-01-lineHeight);\n letter-spacing: var(--f-display-01-letterSpacing);\n }\n @media (min-width: 750px) {\n :root {\n --f-heading-01-fontSize: 48px;\n }\n }\n @media (min-width: 900px) {\n :root {\n --f-heading-01-fontSize: 72px;\n --f-heading-02-fontSize: 48px;\n --f-display-01-fontSize: 150px;\n }\n }\n @media (min-width: 1024px) {\n :root {\n --f-heading-01-fontSize: 83px;\n --f-heading-02-fontSize: 60px;\n --f-heading-03-fontSize: 42px;\n --f-heading-04-fontSize: 36px;\n }\n }\n .f-heading-01 b, .f-heading-01 strong {\n font-weight: var(--f-heading-01---bold-weight, bold);\n }\n .f-heading-02 b, .f-heading-02 strong {\n font-weight: var(--f-heading-02---bold-weight, bold);\n }\n .f-heading-03 b, .f-heading-03 strong {\n font-weight: var(--f-heading-03---bold-weight, bold);\n }\n .f-heading-04 b, .f-heading-04 strong {\n font-weight: var(--f-heading-04---bold-weight, bold);\n }\n .f-heading-05 b, .f-heading-05 strong {\n font-weight: var(--f-heading-05---bold-weight, bold);\n }\n .f-heading-06 b, .f-heading-06 strong {\n font-weight: var(--f-heading-06---bold-weight, bold);\n }\n .f-body-01 b, .f-body-01 strong {\n font-weight: var(--f-body-01---bold-weight, bold);\n }\n .f-body-02 b, .f-body-02 strong {\n font-weight: var(--f-body-02---bold-weight, bold);\n }\n .f-ui-01 b, .f-ui-01 strong {\n font-weight: var(--f-ui-01---bold-weight, bold);\n }\n .f-ui-02 b, .f-ui-02 strong {\n font-weight: var(--f-ui-02---bold-weight, bold);\n }\n .f-ui-02-light b, .f-ui-02-light strong {\n font-weight: var(--f-ui-02-light---bold-weight, bold);\n }\n .f-ui-03 b, .f-ui-03 strong {\n font-weight: var(--f-ui-03---bold-weight, bold);\n }\n .f-ui-03-light b, .f-ui-03-light strong {\n font-weight: var(--f-ui-03-light---bold-weight, bold);\n }\n .f-ui-04 b, .f-ui-04 strong {\n font-weight: var(--f-ui-04---bold-weight, bold);\n }\n .f-ui-05 b, .f-ui-05 strong {\n font-weight: var(--f-ui-05---bold-weight, bold);\n }\n .f-caption b, .f-caption strong {\n font-weight: var(--f-caption---bold-weight, bold);\n }\n .f-display-01 b, .f-display-01 strong {\n font-weight: var(--f-display-01---bold-weight, bold);\n }\n :root {\n --grey-100: #f8f8f8;\n --grey-200: #f2f2f2;\n --grey-300: #e6e6e6;\n --grey-400: #d8d8d8;\n --grey-500: #8c8c8c;\n --grey-600: #6e6e6e;\n --grey-700: #666666;\n --grey-800: #4d4d4d;\n --grey-900: #242424;\n --green-100: #eaffee;\n --green-200: #d3ffdc;\n --green-300: #9dffb4;\n --green-400: #63fb92;\n --green-500: #00e766;\n --green-600: #00c959;\n --green-700: #009d45;\n --green-800: #007734;\n --green-900: #004f23;\n --yellow-100: #fefee5;\n --yellow-200: #ffffcb;\n --yellow-300: #fdfdaa;\n --yellow-400: #ffff8b;\n --yellow-500: #ffff51;\n --yellow-600: #f3f30a;\n --yellow-700: #d7d72b;\n --yellow-800: #9a9a1e;\n --yellow-900: #636313;\n --orange-100: #fff4ee;\n --orange-200: #ffeade;\n --orange-300: #ffdcc5;\n --orange-400: #ffcca9;\n --orange-500: #ffb87e;\n --orange-600: #ffa543;\n --orange-700: #cb7f28;\n --orange-800: #995f1e;\n --orange-900: #653f14;\n --red-100: #feefef;\n --red-200: #ffe0e1;\n --red-300: #ffc7c9;\n --red-400: #ff9ea2;\n --red-500: #ff7a7f;\n --red-600: #ff4d68;\n --red-700: #d01111;\n --red-800: #a3001a;\n --red-900: #6f0011;\n --purple-100: #f9f3ff;\n --purple-200: #f4e8ff;\n --purple-300: #e9ceff;\n --purple-400: #ddb1ff;\n --purple-500: #d18fff;\n --purple-600: #c461ff;\n --purple-700: #af56e4;\n --purple-800: #8337b1;\n --purple-900: #3d1e4f;\n --blue-100: #eff0ff;\n --blue-200: #dee0ff;\n --blue-300: #caceff;\n --blue-400: #b2b8ff;\n --blue-500: #7a89f5;\n --blue-600: #2b69fc;\n --blue-700: #0034cb;\n --blue-800: #002799;\n --blue-900: #001a65;\n --cyan-100: #E0EEFF;\n --cyan-200: #D3E6FF;\n --cyan-300: #B5D8FF;\n --cyan-400: #92C8FF;\n --cyan-500: #6CBFFE;\n --cyan-600: #3FA9F5;\n --cyan-700: #267FBE;\n --cyan-800: #1F689B;\n --cyan-900: #15496D;\n --black: #000000;\n --white: #ffffff;\n --transparent: transparent;\n --current: currentColor;\n }\n .grid-layout {\n display: grid;\n grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);\n grid-gap: var(--inner-gutter);\n }\n .grid-col-span-12 {\n --container-grid-columns: 12;\n grid-column: span 12 / span 12;\n }\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n @media (min-width: 750px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .md\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .md\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .md\\:grid-line-x-0 > *::before {\n content: none;\n }\n .md\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .md\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .md\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .md\\:grid-line-y-0 > *::after {\n content: none;\n }\n .md\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .md\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .md\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .md\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .md\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .md\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .md\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .md\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .md\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .md\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .md\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .md\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .md\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .md\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .md\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .md\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .md\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .md\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .md\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .md\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .md\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .md\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .md\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .md\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .md\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .md\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .md\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .md\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .md\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .md\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .md\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .md\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .md\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .md\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .md\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .md\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .md\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .md\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .md\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .md\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .md\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .md\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .md\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .md\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .md\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .md\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .md\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .md\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .md\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .md\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .md\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .md\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .md\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .md\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .md\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .md\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .md\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .md\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .md\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .md\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .md\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .md\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .md\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .md\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .md\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .md\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .md\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .md\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .md\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .md\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .md\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .md\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .md\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .md\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .md\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .md\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .md\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .md\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .md\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .md\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .md\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .md\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .md\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .md\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .md\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .md\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .md\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .md\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .md\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .md\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .md\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .md\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .md\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .md\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .md\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .md\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .md\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .md\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .md\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .md\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .md\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .md\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .md\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .md\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n }\n @media (min-width: 900px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .lg\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .lg\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .lg\\:grid-line-x-0 > *::before {\n content: none;\n }\n .lg\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .lg\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .lg\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .lg\\:grid-line-y-0 > *::after {\n content: none;\n }\n .lg\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .lg\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .lg\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .lg\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .lg\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .lg\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .lg\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .lg\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .lg\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .lg\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .lg\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .lg\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .lg\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .lg\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .lg\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .lg\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .lg\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .lg\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .lg\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .lg\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .lg\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .lg\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .lg\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .lg\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .lg\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .lg\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .lg\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .lg\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .lg\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .lg\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .lg\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .lg\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .lg\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .lg\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .lg\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .lg\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .lg\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .lg\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .lg\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .lg\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .lg\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .lg\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .lg\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .lg\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .lg\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .lg\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .lg\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .lg\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .lg\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .lg\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .lg\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .lg\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .lg\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .lg\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .lg\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .lg\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .lg\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .lg\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .lg\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .lg\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .lg\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .lg\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .lg\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .lg\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .lg\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .lg\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .lg\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .lg\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .lg\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .lg\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .lg\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .lg\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .lg\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .lg\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .lg\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .lg\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .lg\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .lg\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .lg\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .lg\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .lg\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .lg\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .lg\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .lg\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .lg\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .lg\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .lg\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .lg\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .lg\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .lg\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .lg\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .lg\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .lg\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .lg\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .lg\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .lg\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .lg\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .lg\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .lg\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .lg\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .lg\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .lg\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .lg\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .lg\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n }\n @media (min-width: 1024px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .xl\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xl\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xl\\:grid-line-x-0 > *::before {\n content: none;\n }\n .xl\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xl\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xl\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xl\\:grid-line-y-0 > *::after {\n content: none;\n }\n .xl\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .xl\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .xl\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .xl\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .xl\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .xl\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .xl\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .xl\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .xl\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .xl\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .xl\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .xl\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .xl\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .xl\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .xl\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .xl\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .xl\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .xl\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .xl\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .xl\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .xl\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .xl\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .xl\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .xl\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .xl\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .xl\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .xl\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .xl\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .xl\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .xl\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .xl\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .xl\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .xl\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .xl\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .xl\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .xl\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .xl\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .xl\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .xl\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .xl\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .xl\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .xl\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .xl\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .xl\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .xl\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .xl\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .xl\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .xl\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .xl\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .xl\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .xl\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .xl\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .xl\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .xl\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .xl\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .xl\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .xl\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .xl\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .xl\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .xl\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .xl\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .xl\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .xl\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .xl\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .xl\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .xl\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .xl\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .xl\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .xl\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .xl\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .xl\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .xl\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .xl\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .xl\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .xl\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .xl\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .xl\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .xl\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .xl\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .xl\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .xl\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xl\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xl\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xl\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xl\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xl\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xl\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xl\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xl\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xl\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xl\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xl\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n }\n @media (min-width: 1280px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .xxl\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxl\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxl\\:grid-line-x-0 > *::before {\n content: none;\n }\n .xxl\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxl\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxl\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxl\\:grid-line-y-0 > *::after {\n content: none;\n }\n .xxl\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .xxl\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .xxl\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .xxl\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .xxl\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .xxl\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .xxl\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .xxl\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .xxl\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .xxl\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .xxl\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .xxl\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .xxl\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .xxl\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .xxl\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .xxl\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .xxl\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .xxl\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .xxl\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .xxl\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .xxl\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .xxl\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .xxl\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .xxl\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .xxl\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .xxl\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .xxl\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .xxl\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .xxl\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .xxl\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .xxl\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .xxl\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .xxl\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .xxl\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .xxl\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .xxl\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .xxl\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .xxl\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .xxl\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .xxl\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .xxl\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .xxl\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .xxl\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .xxl\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .xxl\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .xxl\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .xxl\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .xxl\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .xxl\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .xxl\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .xxl\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .xxl\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .xxl\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .xxl\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .xxl\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .xxl\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .xxl\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .xxl\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .xxl\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .xxl\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .xxl\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .xxl\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .xxl\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .xxl\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .xxl\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .xxl\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .xxl\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .xxl\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .xxl\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .xxl\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .xxl\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .xxl\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .xxl\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .xxl\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .xxl\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .xxl\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .xxl\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .xxl\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .xxl\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .xxl\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .xxl\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xxl\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xxl\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxl\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxl\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xxl\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xxl\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxl\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxl\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxl\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxl\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxl\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n }\n @media (min-width: 2200px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .xxxl\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxxl\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxxl\\:grid-line-x-0 > *::before {\n content: none;\n }\n .xxxl\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxxl\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxxl\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxxl\\:grid-line-y-0 > *::after {\n content: none;\n }\n .xxxl\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .xxxl\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .xxxl\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .xxxl\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .xxxl\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .xxxl\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .xxxl\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .xxxl\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .xxxl\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .xxxl\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .xxxl\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .xxxl\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .xxxl\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .xxxl\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .xxxl\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .xxxl\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .xxxl\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .xxxl\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .xxxl\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .xxxl\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .xxxl\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .xxxl\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .xxxl\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .xxxl\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .xxxl\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .xxxl\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .xxxl\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .xxxl\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .xxxl\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .xxxl\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .xxxl\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .xxxl\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .xxxl\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .xxxl\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .xxxl\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .xxxl\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .xxxl\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .xxxl\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .xxxl\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .xxxl\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .xxxl\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .xxxl\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .xxxl\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .xxxl\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .xxxl\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .xxxl\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .xxxl\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .xxxl\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .xxxl\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .xxxl\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .xxxl\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .xxxl\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .xxxl\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .xxxl\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .xxxl\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .xxxl\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .xxxl\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .xxxl\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .xxxl\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .xxxl\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .xxxl\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .xxxl\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .xxxl\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .xxxl\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .xxxl\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .xxxl\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .xxxl\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .xxxl\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .xxxl\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .xxxl\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .xxxl\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .xxxl\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .xxxl\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .xxxl\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .xxxl\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .xxxl\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .xxxl\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .xxxl\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .xxxl\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .xxxl\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .xxxl\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xxxl\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xxxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xxxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xxxl\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxxl\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxxl\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xxxl\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xxxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xxxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xxxl\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxxl\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxxl\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxxl\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxxl\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxxl\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n }\n .cols-container > .ml-0 {\n margin-left: 0;\n }\n .w-12-cols {\n width: calc(((12 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (12 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .w-12-cols {\n width: calc(((12 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (12 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .w-12-cols > * {\n --container-grid-columns: 12;\n }\n .border-inside {\n position: relative;\n \n &::after {\n pointer-events: none;\n }\n \n &::after {\n position: absolute;\n }\n \n &::after {\n inset: 0rem;\n }\n \n &::after {\n z-index: 1;\n }\n \n &::after {\n border-radius: 8px;\n }\n \n &::after {\n border-width: 1px;\n }\n \n &::after {\n border-width: 2px;\n }\n \n &::after {\n border-color: rgba(0, 0, 0, .1 );\n }\n \n &::after {\n content: '';\n }\n }\n .border-inside-inverse {\n &::after {\n border-color: rgba(255, 255, 255, 0.3);\n }\n &::after {\n content: '';\n }\n }\n .border-inside-pill {\n &::after {\n border-radius: 100px;\n }\n &::after {\n content: '';\n }\n }\n .input-label {\n font-family: var(--f-ui-04-fontFamily);\n font-weight: var(--f-ui-04-fontWeight);\n font-size: var(--f-ui-04-fontSize);\n line-height: var(--f-ui-04-lineHeight);\n letter-spacing: var(--f-ui-04-letterSpacing);\n }\n .input-label b,.input-label strong {\n font-weight: var(--f-ui-04---bold-weight, bold);\n }\n .input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: flex;\n min-height: 2.5rem;\n width: 100%;\n align-items: center;\n padding-top: 10px;\n padding-bottom: 10px;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n border-radius: 8px;\n border-width: 2px;\n border-color: rgba(0, 0, 0, .1 );\n }\n .input:hover {\n border-color: var(--black);\n }\n .input:active {\n border-color: var(--black);\n }\n .input {\n font-family: var(--f-ui-02-light-fontFamily);\n font-weight: var(--f-ui-02-light-fontWeight);\n font-size: var(--f-ui-02-light-fontSize);\n line-height: var(--f-ui-02-light-lineHeight);\n letter-spacing: var(--f-ui-02-light-letterSpacing);\n }\n .input b,.input strong {\n font-weight: var(--f-ui-02-light---bold-weight, bold);\n }\n .input::-moz-placeholder {\n color: var(--grey-500);\n }\n .input::placeholder {\n color: var(--grey-500);\n }\n .input {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n }\n .input:focus-visible {\n outline-style: solid;\n }\n .input:disabled {\n cursor: not-allowed;\n background-color: var(--grey-300);\n color: var(--grey-500);\n }\n .input:disabled:hover {\n border-color: rgba(0, 0, 0, .1 );\n }\n .input:disabled:active {\n border-color: rgba(0, 0, 0, .1 );\n }\n .input-with-icon {\n padding-right: 34px;\n }\n .input-checkbox {\n position: relative;\n height: 1rem;\n min-height: auto;\n width: 1rem;\n padding: 0rem;\n border-radius: 4px;\n border-color: rgba(0, 0, 0, .15 );\n }\n .input-checkbox::after {\n --tw-content: '';\n content: var(--tw-content);\n position: absolute;\n top: 0rem;\n left: 50%;\n --tw-translate-x: -50%;\n height: 10px;\n width: 6px;\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n border-bottom-width: 2px;\n border-right-width: 2px;\n border-color: var(--transparent);\n }\n .input-checkbox:checked {\n border-color: var(--black);\n background-color: var(--black);\n }\n .input-checkbox:checked::after {\n border-color: var(--white);\n }\n .input-checkbox:checked:disabled {\n border-color: rgba(0, 0, 0, .15 );\n background-color: var(--grey-300);\n }\n .input-checkbox:checked:disabled::after {\n border-color: rgba(0, 0, 0, .15 );\n }\n .input-radio {\n position: relative;\n height: 1rem;\n min-height: auto;\n width: 1rem;\n padding: 0rem;\n border-radius: 9999px;\n border-color: rgba(0, 0, 0, .15 );\n }\n .input-radio::after {\n --tw-content: '';\n content: var(--tw-content);\n position: absolute;\n top: 50%;\n left: 50%;\n --tw-translate-x: -50%;\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n height: 6px;\n width: 6px;\n border-radius: 9999px;\n background-color: var(--transparent);\n }\n .input-radio:checked {\n border-color: var(--black);\n background-color: var(--black);\n }\n .input-radio:checked::after {\n background-color: var(--white);\n }\n .input-radio:checked:disabled::after {\n background-color: var(--white);\n }\n .input-error {\n border-color: var(--red-700);\n }\n .input-counter {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n color: var(--grey-500);\n \n &.input-counter-error {\n color: var(--red-700);\n }\n }\n .loader {\n box-sizing: border-box;\n display: inline-block;\n height: 1rem;\n width: 1rem;\n }\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n .loader {\n animation: spin 1s linear infinite;\n border-radius: 9999px;\n border: 3px solid rgba(0, 0, 0, .3);\n border-bottom-color: #000;\n }\n .scroller-x {\n -ms-overflow-style: none;\n scrollbar-width: none;\n }\n .scroller-x::-webkit-scrollbar {\n display: none;\n }\n .scroller-x {\n overflow: auto;\n overscroll-behavior-x: contain;\n }\n /** region TRANSITIONS */\n .effect-color {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n }\n .effect-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n }\n .effect-background {\n transition-property: background;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n }\n .effect-height {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n transition-property: height;\n }\n .effect-shadow {\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n }\n /** endregion */\n /* region FOCUS */\n .effect-focus {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n }\n .effect-focus:focus-visible {\n outline-style: solid;\n }\n .effect-focus-within {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n }\n .effect-focus-within:focus-within {\n outline-style: solid;\n }\n /* endregion */\n /* region BG */\n .effect-bg-pattern {\n position: relative;\n z-index: 1;\n \n &::before {\n position: absolute;\n content: '';\n z-index: -1;\n inset: 0;\n background-color: rgba(208, 208, 208, 0.75);\n opacity: 0.75;\n background-image: repeating-linear-gradient(45deg, #F5F5F5 25%, transparent 25%, transparent 75%, #F5F5F5 75%, #F5F5F5), repeating-linear-gradient(45deg, #F5F5F5 25%, #D0D0D0 25%, #D0D0D0 75%, #F5F5F5 75%, #F5F5F5);\n background-position: 0 0, 8px 8px;\n background-size: 16px 16px;\n }\n }\n .effect-bg-behind-link {\n position: relative;\n }\n .effect-bg-behind-link::before {\n position: absolute;\n top: 0rem;\n bottom: 0rem;\n left: -0.5rem;\n right: 0rem;\n z-index: 0;\n border-radius: 8px;\n background-color: var(--grey-400);\n --tw-content: '';\n content: var(--tw-content);\n }\n .effect-bg-behind-link[aria-disabled=\"true\"]::before {\n background-color: var(--transparent);\n }\n /* endregion */\n /*region shadow*/\n /*endregion*/\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .visible {\n visibility: visible;\n }\n .collapse {\n visibility: collapse;\n }\n .static {\n position: static;\n }\n .fixed {\n position: fixed;\n }\n .absolute {\n position: absolute;\n }\n .relative {\n position: relative;\n }\n .sticky {\n position: sticky;\n }\n .inset-0 {\n inset: 0rem;\n }\n .inset-x-16 {\n left: 1rem;\n right: 1rem;\n }\n .-top-1 {\n top: -0.0625rem;\n }\n .bottom-0 {\n bottom: 0rem;\n }\n .bottom-8 {\n bottom: 0.5rem;\n }\n .left-0 {\n left: 0rem;\n }\n .left-1\\/2 {\n left: 50%;\n }\n .left-4 {\n left: 0.25rem;\n }\n .left-\\[4px\\] {\n left: 4px;\n }\n .right-0 {\n right: 0rem;\n }\n .right-4 {\n right: 0.25rem;\n }\n .right-8 {\n right: 0.5rem;\n }\n .right-\\[6px\\] {\n right: 6px;\n }\n .top-0 {\n top: 0rem;\n }\n .top-1\\/2 {\n top: 50%;\n }\n .top-16 {\n top: 1rem;\n }\n .top-full {\n top: 100%;\n }\n .z-1 {\n z-index: 1;\n }\n .z-10 {\n z-index: 10;\n }\n .z-50 {\n z-index: 50;\n }\n .z-\\[1\\] {\n z-index: 1;\n }\n .z-\\[999999\\] {\n z-index: 999999;\n }\n .z-focus {\n z-index: 99;\n }\n .z-on-top {\n z-index: 99999;\n }\n .order-first {\n order: -9999;\n }\n .order-last {\n order: 9999;\n }\n .m-0 {\n margin: 0rem;\n }\n .m-32 {\n margin: 2rem;\n }\n .mx-auto {\n margin-left: auto;\n margin-right: auto;\n }\n .my-16 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n }\n .my-20 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n }\n .-ml-16 {\n margin-left: -1rem;\n }\n .-mr-16 {\n margin-right: -1rem;\n }\n .mb-10 {\n margin-bottom: 0.625rem;\n }\n .mb-12 {\n margin-bottom: 0.75rem;\n }\n .mb-28 {\n margin-bottom: 1.75rem;\n }\n .mb-4 {\n margin-bottom: 0.25rem;\n }\n .ml-0 {\n margin-left: 0rem;\n }\n .ml-4 {\n margin-left: 0.25rem;\n }\n .ml-64 {\n margin-left: 4rem;\n }\n .ml-8 {\n margin-left: 0.5rem;\n }\n .ml-auto {\n margin-left: auto;\n }\n .mr-4 {\n margin-right: 0.25rem;\n }\n .mr-8 {\n margin-right: 0.5rem;\n }\n .mr-auto {\n margin-right: auto;\n }\n .mt-12 {\n margin-top: 0.75rem;\n }\n .mt-16 {\n margin-top: 1rem;\n }\n .mt-2 {\n margin-top: 0.125rem;\n }\n .mt-20 {\n margin-top: 1.25rem;\n }\n .mt-28 {\n margin-top: 1.75rem;\n }\n .mt-32 {\n margin-top: 2rem;\n }\n .mt-4 {\n margin-top: 0.25rem;\n }\n .mt-6 {\n margin-top: 0.375rem;\n }\n .mt-8 {\n margin-top: 0.5rem;\n }\n .mt-auto {\n margin-top: auto;\n }\n .line-clamp-1 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n }\n .line-clamp-2 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n }\n .line-clamp-3 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n }\n .line-clamp-4 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 4;\n }\n .block {\n display: block;\n }\n .inline-block {\n display: inline-block;\n }\n .inline {\n display: inline;\n }\n .flex {\n display: flex;\n }\n .inline-flex {\n display: inline-flex;\n }\n .table {\n display: table;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .aspect-16x9 {\n aspect-ratio: 16/9;\n }\n .aspect-1x1 {\n aspect-ratio: 1/1;\n }\n .aspect-21x9 {\n aspect-ratio: 21/9;\n }\n .aspect-3x2 {\n aspect-ratio: 3/2;\n }\n .aspect-4x3 {\n aspect-ratio: 4/3;\n }\n .aspect-4x5 {\n aspect-ratio: 4/5;\n }\n .h-0 {\n height: 0rem;\n }\n .h-12 {\n height: 0.75rem;\n }\n .h-16 {\n height: 1rem;\n }\n .h-2 {\n height: 0.125rem;\n }\n .h-20 {\n height: 1.25rem;\n }\n .h-24 {\n height: 1.5rem;\n }\n .h-28 {\n height: 1.75rem;\n }\n .h-32 {\n height: 2rem;\n }\n .h-36 {\n height: 2.25rem;\n }\n .h-4 {\n height: 0.25rem;\n }\n .h-40 {\n height: 2.5rem;\n }\n .h-44 {\n height: 2.75rem;\n }\n .h-48 {\n height: 3rem;\n }\n .h-64 {\n height: 4rem;\n }\n .h-8 {\n height: 0.5rem;\n }\n .h-96 {\n height: 6rem;\n }\n .h-auto {\n height: auto;\n }\n .h-full {\n height: 100%;\n }\n .\\!min-h-20 {\n min-height: 1.25rem !important;\n }\n .min-h-156 {\n min-height: 156px;\n }\n .min-h-36 {\n min-height: 2.25rem;\n }\n .min-h-44 {\n min-height: 2.75rem;\n }\n .min-h-56 {\n min-height: 3.5rem;\n }\n .min-h-80 {\n min-height: 5rem;\n }\n .min-h-\\[150px\\] {\n min-height: 150px;\n }\n .min-h-\\[225px\\] {\n min-height: 225px;\n }\n .min-h-\\[90px\\] {\n min-height: 90px;\n }\n .min-h-full {\n min-height: 100%;\n }\n .min-h-screen {\n min-height: 100vh;\n }\n .w-20 {\n width: 1.25rem;\n }\n .w-28 {\n width: 1.75rem;\n }\n .w-32 {\n width: 2rem;\n }\n .w-44 {\n width: 2.75rem;\n }\n .w-\\[130px\\] {\n width: 130px;\n }\n .w-\\[300px\\] {\n width: 300px;\n }\n .w-\\[54px\\] {\n width: 54px;\n }\n .w-fit {\n width: -moz-fit-content;\n width: fit-content;\n }\n .w-full {\n width: 100%;\n }\n .min-w-\\[200px\\] {\n min-width: 200px;\n }\n .min-w-\\[210px\\] {\n min-width: 210px;\n }\n .min-w-\\[250px\\] {\n min-width: 250px;\n }\n .min-w-\\[280px\\] {\n min-width: 280px;\n }\n .max-w-120 {\n max-width: 120px;\n }\n .max-w-full {\n max-width: 100%;\n }\n .max-w-sidebar {\n max-width: 1224px;\n }\n .max-w-xxxl {\n max-width: 2200px;\n }\n .flex-none {\n flex: none;\n }\n .grow {\n flex-grow: 1;\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n .transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .resize {\n resize: both;\n }\n .flex-row {\n flex-direction: row;\n }\n .flex-row-reverse {\n flex-direction: row-reverse;\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .items-center {\n align-items: center;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-between {\n justify-content: space-between;\n }\n .gap-1 {\n gap: 0.0625rem;\n }\n .gap-12 {\n gap: 0.75rem;\n }\n .gap-20 {\n gap: 1.25rem;\n }\n .gap-4 {\n gap: 0.25rem;\n }\n .gap-x-12 {\n -moz-column-gap: 0.75rem;\n column-gap: 0.75rem;\n }\n .gap-x-16 {\n -moz-column-gap: 1rem;\n column-gap: 1rem;\n }\n .gap-x-2 {\n -moz-column-gap: 0.125rem;\n column-gap: 0.125rem;\n }\n .gap-x-8 {\n -moz-column-gap: 0.5rem;\n column-gap: 0.5rem;\n }\n .gap-y-12 {\n row-gap: 0.75rem;\n }\n .gap-y-16 {\n row-gap: 1rem;\n }\n .gap-y-4 {\n row-gap: 0.25rem;\n }\n .gap-y-8 {\n row-gap: 0.5rem;\n }\n .space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.125rem * var(--tw-space-x-reverse));\n margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));\n }\n .space-y-12 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n }\n .space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n }\n .space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n }\n .space-y-4 {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n }\n .space-y-8 {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-x-auto {\n overflow-x: auto;\n }\n .overflow-x-hidden {\n overflow-x: hidden;\n }\n .overflow-y-scroll {\n overflow-y: scroll;\n }\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .break-words {\n overflow-wrap: break-word;\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-full {\n border-radius: 9999px;\n }\n .rounded-lg {\n border-radius: 16px;\n }\n .rounded-md {\n border-radius: 12px;\n }\n .rounded-pill {\n border-radius: 100px;\n }\n .rounded-sm {\n border-radius: 8px;\n }\n .rounded-xs {\n border-radius: 4px;\n }\n .rounded-xxs {\n border-radius: 2px;\n }\n .rounded-t-lg {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n }\n .rounded-tl-lg {\n border-top-left-radius: 16px;\n }\n .rounded-tr-lg {\n border-top-right-radius: 16px;\n }\n .border {\n border-width: 1px;\n }\n .border-0 {\n border-width: 0px;\n }\n .border-2 {\n border-width: 2px;\n }\n .border-3 {\n border-width: 3px;\n }\n .border-b-2 {\n border-bottom-width: 2px;\n }\n .border-l-0 {\n border-left-width: 0px;\n }\n .border-r-0 {\n border-right-width: 0px;\n }\n .border-t-2 {\n border-top-width: 2px;\n }\n .border-\\[\\#0034CB\\] {\n --tw-border-opacity: 1;\n border-color: rgb(0 52 203 / var(--tw-border-opacity));\n }\n .border-\\[\\#d2d2d2\\] {\n --tw-border-opacity: 1;\n border-color: rgb(210 210 210 / var(--tw-border-opacity));\n }\n .border-accent {\n border-color: var(--green-500);\n }\n .border-current {\n border-color: currentColor;\n }\n .border-default {\n border-color: var(--black);\n }\n .border-error {\n border-color: var(--red-700);\n }\n .border-inverse {\n border-color: var(--white);\n }\n .border-inverse-soft {\n border-color: rgba(255, 255, 255, 0.3);\n }\n .border-inverse-softer {\n border-color: rgba(255, 255, 255, 0.15);\n }\n .border-soft {\n border-color: rgba(0, 0, 0, .15 );\n }\n .border-softer {\n border-color: rgba(0, 0, 0, .1 );\n }\n .border-softest {\n border-color: rgba(0, 0, 0, .05 );\n }\n .border-transparent {\n border-color: var(--transparent);\n }\n .border-b-softer {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .\\!bg-accent-dark {\n background-color: var(--green-600) !important;\n }\n .\\!bg-darker {\n background-color: var(--grey-400) !important;\n }\n .\\!bg-strong-dark {\n background-color: var(--grey-800) !important;\n }\n .bg-accent {\n background-color: var(--green-500);\n }\n .bg-accent-dark {\n background-color: var(--green-600);\n }\n .bg-accent-darker {\n background-color: var(--green-800);\n }\n .bg-current {\n background-color: currentColor;\n }\n .bg-dark {\n background-color: var(--grey-300);\n }\n .bg-darker {\n background-color: var(--grey-400);\n }\n .bg-default {\n background-color: var(--grey-200);\n }\n .bg-error {\n background-color: var(--red-200);\n }\n .bg-inverse {\n background-color: var(--white);\n }\n .bg-inverse-soft {\n background-color: rgba(255, 255, 255, .2);\n }\n .bg-inverse-softer {\n background-color: rgba(255, 255, 255, .15);\n }\n .bg-on-dark {\n background-color: rgba(255, 255, 255, 0.2);\n }\n .bg-on-gradient {\n background-color: rgba(0, 0, 0, 0.1);\n }\n .bg-overlay {\n background-color: rgba(0, 0, 0, 0.25);\n }\n .bg-strong {\n background-color: var(--grey-700);\n }\n .bg-strong-dark {\n background-color: var(--grey-800);\n }\n .bg-stronger {\n background-color: var(--grey-900);\n }\n .bg-strongest {\n background-color: var(--black);\n }\n .bg-strongest-soft {\n background-color: rgba(0, 0, 0, .05);\n }\n .bg-success {\n background-color: var(--green-200);\n }\n .bg-transparent {\n background-color: var(--transparent);\n }\n .bg-warning {\n background-color: var(--yellow-200);\n }\n .object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n }\n .object-center {\n -o-object-position: center;\n object-position: center;\n }\n .\\!p-8 {\n padding: 0.5rem !important;\n }\n .p-0 {\n padding: 0rem;\n }\n .p-12 {\n padding: 0.75rem;\n }\n .p-16 {\n padding: 1rem;\n }\n .p-20 {\n padding: 1.25rem;\n }\n .p-32 {\n padding: 2rem;\n }\n .p-4 {\n padding: 0.25rem;\n }\n .p-6 {\n padding: 0.375rem;\n }\n .p-8 {\n padding: 0.5rem;\n }\n .\\!px-0 {\n padding-left: 0rem !important;\n padding-right: 0rem !important;\n }\n .\\!py-0 {\n padding-top: 0rem !important;\n padding-bottom: 0rem !important;\n }\n .\\!py-4 {\n padding-top: 0.25rem !important;\n padding-bottom: 0.25rem !important;\n }\n .px-12 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n }\n .px-16 {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n .px-2 {\n padding-left: 0.125rem;\n padding-right: 0.125rem;\n }\n .px-20 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n }\n .px-4 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n }\n .py-1 {\n padding-top: 0.0625rem;\n padding-bottom: 0.0625rem;\n }\n .py-12 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n }\n .py-16 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n }\n .py-20 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n }\n .py-4 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n }\n .py-6 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n }\n .py-8 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n }\n .pb-16 {\n padding-bottom: 1rem;\n }\n .pb-20 {\n padding-bottom: 1.25rem;\n }\n .pb-28 {\n padding-bottom: 1.75rem;\n }\n .pb-60 {\n padding-bottom: 3.75rem;\n }\n .pb-8 {\n padding-bottom: 0.5rem;\n }\n .pl-12 {\n padding-left: 0.75rem;\n }\n .pl-28 {\n padding-left: 1.75rem;\n }\n .pl-32 {\n padding-left: 2rem;\n }\n .pl-36 {\n padding-left: 2.25rem;\n }\n .pl-4 {\n padding-left: 0.25rem;\n }\n .pl-8 {\n padding-left: 0.5rem;\n }\n .pr-12 {\n padding-right: 0.75rem;\n }\n .pr-28 {\n padding-right: 1.75rem;\n }\n .pr-32 {\n padding-right: 2rem;\n }\n .pr-4 {\n padding-right: 0.25rem;\n }\n .pr-8 {\n padding-right: 0.5rem;\n }\n .pt-12 {\n padding-top: 0.75rem;\n }\n .pt-20 {\n padding-top: 1.25rem;\n }\n .pt-28 {\n padding-top: 1.75rem;\n }\n .pt-32 {\n padding-top: 2rem;\n }\n .pt-40 {\n padding-top: 2.5rem;\n }\n .pt-48 {\n padding-top: 3rem;\n }\n .pt-8 {\n padding-top: 0.5rem;\n }\n .text-left {\n text-align: left;\n }\n .text-center {\n text-align: center;\n }\n .text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n .font-bold {\n font-weight: 700;\n }\n .uppercase {\n text-transform: uppercase;\n }\n .\\!text-current {\n color: currentColor !important;\n }\n .text-\\[\\#0034CB\\] {\n --tw-text-opacity: 1;\n color: rgb(0 52 203 / var(--tw-text-opacity));\n }\n .text-accent {\n color: var(--green-500);\n }\n .text-current {\n color: currentColor;\n }\n .text-default {\n color: var(--black);\n }\n .text-error {\n color: var(--red-700);\n }\n .text-extra-light {\n color: var(--grey-300);\n }\n .text-inverse {\n color: var(--white);\n }\n .text-light {\n color: var(--grey-700);\n }\n .text-lighter {\n color: var(--grey-600);\n }\n .text-lightest {\n color: var(--grey-500);\n }\n .text-on-gradient {\n color: rgba(0, 0, 0, 0.55);\n }\n .text-success {\n color: var(--green-800);\n }\n .text-transparent {\n color: var(--transparent);\n }\n .text-warning {\n color: var(--yellow-900);\n }\n .underline {\n text-decoration-line: underline;\n }\n .\\!no-underline {\n text-decoration-line: none !important;\n }\n .decoration-\\[\\#0034CB\\] {\n text-decoration-color: #0034CB;\n }\n .decoration-accent {\n text-decoration-color: var(--green-500);\n }\n .decoration-2 {\n text-decoration-thickness: 2px;\n }\n .underline-offset-4 {\n text-underline-offset: 4px;\n }\n .opacity-0 {\n opacity: 0;\n }\n .opacity-100 {\n opacity: 1;\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n }\n .shadow-accent {\n --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);\n --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n }\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n }\n .shadow-small {\n --tw-shadow: 0px 1.5px 2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0px 1.5px 2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n }\n .outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n .outline {\n outline-style: solid;\n }\n .filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n }\n .backdrop-blur {\n --tw-backdrop-blur: blur(8px);\n -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n .transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n .duration-300 {\n transition-duration: 300ms;\n }\n [class*=\"keyline-\"] {\n position: relative;\n }\n [class*=\"keyline-\"]::before {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n inset-inline-start: calc(var(--inner-gutter) / -2 - 1px);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border: 1px solid transparent;\n pointer-events: none;\n }\n [class*=\"keyline-0\"]::before {\n border-inline-end-color: transparent;\n border-inline-start-color: transparent;\n }\n .ratio {\n --ratio: 100%;\n display: block;\n position: relative;\n overflow: hidden;\n }\n .ratio::before {\n content: attr(👻);\n display: block;\n width: 100%;\n height: 0;\n padding-bottom: var(--ratio);\n }\n .ratio > [class*=\"ratio-content\"] {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n }\n [class*=underline-] {\n text-decoration-line: underline;\n }\n .underline-offset-4 {\n text-underline-offset: 0.2em;\n }\n .\\@container {\n container-type: inline-size;\n }\n .bg-gradient-01-top {\n background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);\n }\n .bg-gradient-01-bottom {\n background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);\n }\n .bg-gradient-02-top {\n background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);\n }\n .bg-gradient-02-bottom {\n background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);\n }\n .bg-gradient-03-top {\n background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);\n }\n .bg-gradient-03-bottom {\n background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);\n }\n .bg-gradient-04-top {\n background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);\n }\n .bg-gradient-04-bottom {\n background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);\n }\n .after\\:effect-opacity::after {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n }\n @media (min-width: 750px) {\n .md\\:grid-col-span-4 {\n --container-grid-columns: 4;\n grid-column: span 4 / span 4;\n }\n .md\\:grid-col-span-6 {\n --container-grid-columns: 6;\n grid-column: span 6 / span 6;\n }\n .md\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .md\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .md\\:w-10-cols > * {\n --container-grid-columns: 10;\n }\n }\n @media (min-width: 900px) {\n .lg\\:grid-col-span-5 {\n --container-grid-columns: 5;\n grid-column: span 5 / span 5;\n }\n .lg\\:grid-col-span-6 {\n --container-grid-columns: 6;\n grid-column: span 6 / span 6;\n }\n .lg\\:grid-col-start-7 {\n grid-column-start: 7;\n }\n .lg\\:w-8-cols {\n width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .lg\\:w-8-cols {\n width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .lg\\:w-8-cols > * {\n --container-grid-columns: 8;\n }\n .lg\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .lg\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .lg\\:w-10-cols > * {\n --container-grid-columns: 10;\n }\n }\n .even\\:bg-inverse-softer:nth-child(even) {\n background-color: rgba(255, 255, 255, .15);\n }\n .invalid\\:text-lightest:invalid {\n color: var(--grey-500);\n }\n .focus-within\\:bg-transparent:focus-within {\n background-color: var(--transparent);\n }\n .hover\\:bg-accent-dark:hover {\n background-color: var(--green-600);\n }\n .hover\\:bg-dark:hover {\n background-color: var(--grey-300);\n }\n .hover\\:bg-darker:hover {\n background-color: var(--grey-400);\n }\n .hover\\:bg-default:hover {\n background-color: var(--grey-200);\n }\n .hover\\:bg-inverse:hover {\n background-color: var(--white);\n }\n .hover\\:bg-strong-dark:hover {\n background-color: var(--grey-800);\n }\n .hover\\:bg-transparent:hover {\n background-color: var(--transparent);\n }\n .hover\\:text-default:hover {\n color: var(--black);\n }\n .hover\\:text-lighter:hover {\n color: var(--grey-600);\n }\n .hover\\:\\!underline:hover {\n text-decoration-line: underline !important;\n }\n .hover\\:no-underline:hover {\n text-decoration-line: none;\n }\n .hover\\:shadow-hover:hover {\n --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n }\n .focus\\:shadow-none:focus {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n }\n .focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n .focus-visible\\:rounded-xs:focus-visible {\n border-radius: 4px;\n }\n .focus-visible\\:text-default:focus-visible {\n color: var(--black);\n }\n .focus-visible\\:outline-none:focus-visible {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n .focus-visible\\:ring:focus-visible {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n }\n .disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n }\n .disabled\\:bg-dark:disabled {\n background-color: var(--grey-300);\n }\n .disabled\\:text-lightest:disabled {\n color: var(--grey-500);\n }\n .aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n cursor: not-allowed;\n }\n .aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n border-color: var(--transparent) !important;\n }\n .aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n background-color: var(--grey-300);\n }\n .aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n background-color: var(--transparent);\n }\n .aria-disabled\\:text-light[aria-disabled=\"true\"] {\n color: var(--grey-700);\n }\n .aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n color: var(--grey-500);\n }\n .aria-disabled\\:line-through[aria-disabled=\"true\"] {\n text-decoration-line: line-through;\n }\n .aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n }\n .aria-current-page\\:bg-darker[aria-current=\"page\"] {\n background-color: var(--grey-400);\n }\n .after\\:absolute::after {\n position: absolute;\n }\n .after\\:inset-0::after {\n inset: 0rem;\n }\n .after\\:inset-x-0::after {\n left: 0rem;\n right: 0rem;\n }\n .after\\:bottom-0::after {\n bottom: 0rem;\n }\n .after\\:left-16::after {\n left: 1rem;\n }\n .after\\:right-16::after {\n right: 1rem;\n }\n .after\\:z-10::after {\n z-index: 10;\n }\n .after\\:rounded-lg::after {\n border-radius: 16px;\n }\n .after\\:rounded-t-lg::after {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n }\n .after\\:border-3::after {\n border-width: 3px;\n }\n .after\\:border-b-2::after {\n border-bottom-width: 2px;\n }\n .after\\:\\!border-transparent::after {\n border-color: var(--transparent) !important;\n }\n .after\\:border-accent::after {\n border-color: var(--green-500);\n }\n .after\\:border-softest::after {\n border-color: rgba(0, 0, 0, .05 );\n }\n .after\\:opacity-0::after {\n opacity: 0;\n }\n .after\\:content-\\[\\'\\'\\]::after {\n --tw-content: '';\n content: var(--tw-content);\n }\n .hover\\:after\\:\\!border-transparent:hover::after {\n border-color: var(--transparent) !important;\n }\n .hover\\:after\\:opacity-100:hover::after {\n opacity: 1;\n }\n .focus-visible\\:after\\:opacity-100:focus-visible::after {\n opacity: 1;\n }\n .aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n border-color: var(--transparent) !important;\n }\n .before\\:absolute::before {\n position: absolute;\n }\n .before\\:inset-x-0::before {\n left: 0rem;\n right: 0rem;\n }\n .before\\:-bottom-2::before {\n bottom: -0.125rem;\n }\n .before\\:bottom-0::before {\n bottom: 0rem;\n }\n .before\\:h-12::before {\n height: 0.75rem;\n }\n .before\\:h-3::before {\n height: 0.1875rem;\n }\n .before\\:rounded-lg::before {\n border-radius: 16px;\n }\n .before\\:border-2::before {\n border-width: 2px;\n }\n .before\\:border-softest::before {\n border-color: rgba(0, 0, 0, .05 );\n }\n .before\\:bg-default::before {\n background-color: var(--grey-200);\n }\n .before\\:bg-inverse-softer::before {\n background-color: rgba(255, 255, 255, .15);\n }\n .before\\:\\!opacity-100::before {\n opacity: 1 !important;\n }\n .before\\:opacity-0::before {\n opacity: 0;\n }\n .before\\:opacity-5::before {\n opacity: 0.05;\n }\n .before\\:content-\\[\\'\\'\\]::before {\n --tw-content: '';\n content: var(--tw-content);\n }\n .before\\:bg-gradient-y::before {\n background: linear-gradient(to bottom, transparent, ease-in-out, black);\n }\n .hover\\:before\\:opacity-100:hover::before {\n opacity: 1;\n }\n .focus-visible\\:before\\:\\!opacity-0:focus-visible::before {\n opacity: 0 !important;\n }\n .focus-visible\\:before\\:opacity-0:focus-visible::before {\n opacity: 0;\n }\n @container (min-width: 46.875rem) {\n .\\@md\\:max-w-192 {\n max-width: 192px;\n }\n }\n @media (min-width: 0px) {\n .sm\\:mb-4 {\n margin-bottom: 0.25rem;\n }\n .sm\\:max-w-\\[200px\\] {\n max-width: 200px;\n }\n }\n @media (min-width: 750px) {\n .md\\:flex {\n display: flex;\n }\n .md\\:hidden {\n display: none;\n }\n .md\\:gap-y-12 {\n row-gap: 0.75rem;\n }\n .md\\:pt-28 {\n padding-top: 1.75rem;\n }\n }\n @media (min-width: 900px) {\n .lg\\:order-last {\n order: 9999;\n }\n .lg\\:order-none {\n order: 0;\n }\n .lg\\:mt-0 {\n margin-top: 0rem;\n }\n .lg\\:block {\n display: block;\n }\n .lg\\:flex {\n display: flex;\n }\n .lg\\:hidden {\n display: none;\n }\n .lg\\:w-\\[150px\\] {\n width: 150px;\n }\n .lg\\:w-auto {\n width: auto;\n }\n .lg\\:max-w-\\[720px\\] {\n max-width: 720px;\n }\n .lg\\:flex-row {\n flex-direction: row;\n }\n .lg\\:flex-nowrap {\n flex-wrap: nowrap;\n }\n .lg\\:gap-y-16 {\n row-gap: 1rem;\n }\n .lg\\:px-28 {\n padding-left: 1.75rem;\n padding-right: 1.75rem;\n }\n .lg\\:\\!pl-12 {\n padding-left: 0.75rem !important;\n }\n .lg\\:\\!pr-12 {\n padding-right: 0.75rem !important;\n }\n }\n @media (min-width: 1024px) {\n .xl\\:pb-40 {\n padding-bottom: 2.5rem;\n }\n }\n @media (min-width: 2200px) {\n .xxxl\\:px-0 {\n padding-left: 0rem;\n padding-right: 0rem;\n }\n }\n ";
|
|
9
33
|
const EdsFormStyle0 = edsFormCss;
|
|
10
34
|
const EdsForm = class {
|
|
11
35
|
constructor(hostRef) {
|
|
12
36
|
registerInstance(this, hostRef);
|
|
13
|
-
this.
|
|
14
|
-
this.handleChange = (e, field) => {
|
|
15
|
-
const target = e.target;
|
|
16
|
-
// Update the field's value in state.
|
|
17
|
-
this.values = Object.assign(Object.assign({}, this.values), {
|
|
18
|
-
[field.name]: target.value
|
|
19
|
-
});
|
|
20
|
-
// Create a copy of the current errors.
|
|
21
|
-
const newErrors = Object.assign({}, this.errors);
|
|
22
|
-
// Validate only the changed field.
|
|
23
|
-
if (field.type === 'checkbox' || field.type === 'radio') {
|
|
24
|
-
if (field.options) {
|
|
25
|
-
// Validate group of checkboxes or radio buttons.
|
|
26
|
-
const fieldErrors = this.validateFieldGroup(field.name, field.type, field.required);
|
|
27
|
-
if (fieldErrors.length > 0) {
|
|
28
|
-
newErrors[field.name] = fieldErrors;
|
|
29
|
-
} else {
|
|
30
|
-
delete newErrors[field.name];
|
|
31
|
-
}
|
|
32
|
-
} else {
|
|
33
|
-
// Validate a single checkbox.
|
|
34
|
-
const fieldErrors = this.validateSingleBox(field.name, field.required);
|
|
35
|
-
if (fieldErrors.length > 0) {
|
|
36
|
-
newErrors[field.name] = fieldErrors;
|
|
37
|
-
} else {
|
|
38
|
-
delete newErrors[field.name];
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
} else {
|
|
42
|
-
// Validate standard text (or similar) inputs.
|
|
43
|
-
const fieldErrors = this.validateField(field.name, target.value, field.type, field.required, field.maxlength);
|
|
44
|
-
if (fieldErrors.length > 0) {
|
|
45
|
-
newErrors[field.name] = fieldErrors;
|
|
46
|
-
} else {
|
|
47
|
-
delete newErrors[field.name];
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
// Update the errors state and hasError flag.
|
|
51
|
-
this.errors = newErrors;
|
|
52
|
-
this.hasError = Object.keys(newErrors).length > 0;
|
|
53
|
-
};
|
|
54
|
-
this.handleSubmit = async e => {
|
|
55
|
-
var _a, _b, _c;
|
|
56
|
-
e.preventDefault();
|
|
57
|
-
if (this.isSubmitting) {
|
|
58
|
-
return;
|
|
59
|
-
}
|
|
60
|
-
this.validateForm();
|
|
61
|
-
if (this.hasError) {
|
|
62
|
-
sendAnalytics({
|
|
63
|
-
category: 'ui-component',
|
|
64
|
-
parentContext: null,
|
|
65
|
-
tag: this.el.tagName.toLowerCase(),
|
|
66
|
-
name: `${(_a = this.submitBtnLabel) === null || _a === void 0 ? void 0 : _a.toLowerCase()}/error` || '',
|
|
67
|
-
action: 'click'
|
|
68
|
-
});
|
|
69
|
-
this.alertMessage = this.errorMessage;
|
|
70
|
-
return;
|
|
71
|
-
}
|
|
72
|
-
this.isSubmitting = true;
|
|
73
|
-
this.formSubmitted = false;
|
|
74
|
-
this.alertMessage = null;
|
|
75
|
-
this.errors = {};
|
|
76
|
-
const formData = await this.getFormData();
|
|
77
|
-
// Log each entry in FormData to see file details
|
|
78
|
-
/*formData.forEach((value, key) => {
|
|
79
|
-
if (value instanceof File) {
|
|
80
|
-
console.log(`File field: ${key}, File name: ${value.name}, File size: ${value.size}`);
|
|
81
|
-
} else {
|
|
82
|
-
console.log(`Field: ${key}, Value: ${value}`);
|
|
83
|
-
}
|
|
84
|
-
});*/
|
|
85
|
-
if (this.setFormUrl && typeof window !== 'undefined') {
|
|
86
|
-
formData.set('form_url', window.location.href);
|
|
87
|
-
}
|
|
88
|
-
if (this.authUser) {
|
|
89
|
-
formData.set('form_user', (_b = this.authUser) === null || _b === void 0 ? void 0 : _b.email);
|
|
90
|
-
}
|
|
91
|
-
/*const formDataObject = Object.fromEntries((formData as any).entries());
|
|
92
|
-
console.log(JSON.stringify(formDataObject));*/
|
|
93
|
-
const headers = this.coupleAuth ? {
|
|
94
|
-
Authorization: `Bearer ${this.authUser.token}`
|
|
95
|
-
} // Include the Keycloak token
|
|
96
|
-
: {};
|
|
97
|
-
try {
|
|
98
|
-
const response = await fetch(this.endpoint, {
|
|
99
|
-
method: 'POST',
|
|
100
|
-
body: formData,
|
|
101
|
-
headers
|
|
102
|
-
});
|
|
103
|
-
// Check if the response status indicates an error
|
|
104
|
-
if (!response.ok) {
|
|
105
|
-
const errorData = await response.json();
|
|
106
|
-
this.hasError = true;
|
|
107
|
-
toast.show(errorData.error || this.errorMessage, 'error');
|
|
108
|
-
//this.alertMessage = errorData.error || this.errorMessage;
|
|
109
|
-
return;
|
|
110
|
-
}
|
|
111
|
-
const data = await response.json();
|
|
112
|
-
this.formSubmitted = true;
|
|
113
|
-
//this.alertMessage = data.message || this.successMessage;
|
|
114
|
-
toast.show(data.message || this.successMessage, 'success');
|
|
115
|
-
this.formEl.reset();
|
|
116
|
-
sendAnalytics({
|
|
117
|
-
category: 'ui-component',
|
|
118
|
-
parentContext: null,
|
|
119
|
-
tag: this.el.tagName.toLowerCase(),
|
|
120
|
-
name: `${(_c = this.submitBtnLabel) === null || _c === void 0 ? void 0 : _c.toLowerCase()}/success` || '',
|
|
121
|
-
action: 'click'
|
|
122
|
-
});
|
|
123
|
-
} catch (err) {
|
|
124
|
-
this.hasError = true;
|
|
125
|
-
//when api is unreachable will trigger the error message
|
|
126
|
-
//this.alertMessage = `${err}`;
|
|
127
|
-
toast.show(`${err}`, 'error');
|
|
128
|
-
} finally {
|
|
129
|
-
this.isSubmitting = false;
|
|
130
|
-
this.formSubmitting.emit(this.isSubmitting);
|
|
131
|
-
}
|
|
132
|
-
};
|
|
37
|
+
this.form = createEvent(this, "form", 7);
|
|
133
38
|
this.setFormUrl = true;
|
|
134
39
|
this.submitBtn = true;
|
|
135
40
|
this.submitBtnLabel = 'Submit';
|
|
@@ -137,42 +42,65 @@ const EdsForm = class {
|
|
|
137
42
|
this.errorMessage = 'Some fields in your form are incorrect.';
|
|
138
43
|
this.submitBtnHintMessage = 'To participate, please sign in using your EBRAINS account. If you do not have an account yet, you can easily create one on the EBRAINS portal.';
|
|
139
44
|
this.endpoint = undefined;
|
|
140
|
-
this.name = 'form';
|
|
45
|
+
this.name = 'eds-form';
|
|
141
46
|
this.fields = [];
|
|
142
|
-
this.values = {};
|
|
143
47
|
this.coupleAuth = false;
|
|
48
|
+
this.user = null;
|
|
49
|
+
this.draft = false;
|
|
50
|
+
this.draftData = {};
|
|
51
|
+
this.values = {};
|
|
144
52
|
this.formSubmitted = false;
|
|
145
53
|
this.hasError = false;
|
|
146
54
|
this.errors = {};
|
|
147
55
|
this.isSubmitting = false;
|
|
148
56
|
this.alertMessage = null;
|
|
149
57
|
this.isAuthenticated = false;
|
|
150
|
-
this.authUser = undefined;
|
|
151
58
|
this.parsedFields = [];
|
|
152
59
|
}
|
|
153
|
-
|
|
154
|
-
var _a;
|
|
155
|
-
this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
|
|
156
|
-
this.authUser = event.detail.user;
|
|
157
|
-
}
|
|
158
|
-
componentDidLoad() {
|
|
60
|
+
async componentWillLoad() {
|
|
159
61
|
this.parseFields(this.fields);
|
|
160
62
|
// Emit context for each eds-link element after the component is fully loaded
|
|
161
|
-
|
|
162
|
-
links.forEach(
|
|
63
|
+
const links = this.el.querySelectorAll('eds-button');
|
|
64
|
+
links.forEach(link => {
|
|
163
65
|
this.emitContext(link);
|
|
164
|
-
})
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
async componentDidLoad() {
|
|
69
|
+
if (this.shouldFormProcessDraft) {
|
|
70
|
+
this.loadDraft();
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
get shouldFormAcceptDraft() {
|
|
74
|
+
var _a;
|
|
75
|
+
return !!(((_a = this.user) === null || _a === void 0 ? void 0 : _a.token) && this.draft);
|
|
76
|
+
}
|
|
77
|
+
get shouldFormProcessDraft() {
|
|
78
|
+
var _a;
|
|
79
|
+
return !!((_a = this.draftData) === null || _a === void 0 ? void 0 : _a._id);
|
|
80
|
+
}
|
|
81
|
+
parseFields(newValue) {
|
|
82
|
+
this.parsedFields = parseData(newValue);
|
|
83
|
+
}
|
|
84
|
+
loadDraft() {
|
|
85
|
+
var _a;
|
|
86
|
+
if ((_a = this.draftData) === null || _a === void 0 ? void 0 : _a.completed) {
|
|
87
|
+
this.formSubmitted = true;
|
|
88
|
+
toast.show(this.draftData.message, 'success');
|
|
89
|
+
this.formEl.reset();
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
92
|
+
this.populateFormWithDraftData(this.draftData);
|
|
93
|
+
return;
|
|
165
94
|
}
|
|
166
|
-
|
|
167
|
-
const event = new CustomEvent
|
|
95
|
+
emitContext(linkElement) {
|
|
96
|
+
const event = new CustomEvent('parentContext', {
|
|
168
97
|
detail: {
|
|
169
98
|
componentName: this.el.tagName.toLowerCase(),
|
|
170
99
|
identifier: null
|
|
171
100
|
}
|
|
172
101
|
});
|
|
173
|
-
|
|
174
|
-
}
|
|
175
|
-
// Visibility helper
|
|
102
|
+
linkElement.dispatchEvent(event);
|
|
103
|
+
}
|
|
176
104
|
isFieldVisible(field) {
|
|
177
105
|
if (!field.condition) {
|
|
178
106
|
return true;
|
|
@@ -180,110 +108,51 @@ const EdsForm = class {
|
|
|
180
108
|
const parentValue = this.values[field.condition.field];
|
|
181
109
|
return parentValue === field.condition.value;
|
|
182
110
|
}
|
|
183
|
-
// Validate individual fields dynamically
|
|
184
|
-
validateField(name, value, type, required, maxLength) {
|
|
185
|
-
const errors = [];
|
|
186
|
-
if (required && !value) {
|
|
187
|
-
errors.push(`${name} is required.`);
|
|
188
|
-
}
|
|
189
|
-
if (maxLength && typeof value === 'string' && value.length > maxLength) {
|
|
190
|
-
errors.push(`${name} must be at most ${maxLength} characters.`);
|
|
191
|
-
}
|
|
192
|
-
if (type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.toString())) {
|
|
193
|
-
errors.push('Invalid email format.');
|
|
194
|
-
}
|
|
195
|
-
return errors;
|
|
196
|
-
}
|
|
197
|
-
validateFieldGroup(name, _type, required) {
|
|
198
|
-
// Find all eds-input-field components that contain this specific name
|
|
199
|
-
const groupFields = Array.from(this.formEl.querySelectorAll('eds-input-field')).filter(edsField => {
|
|
200
|
-
var _a, _b;
|
|
201
|
-
return ((_b = (_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`input[name="${name}"]`)) === null || _b === void 0 ? void 0 : _b.length) > 0;
|
|
202
|
-
});
|
|
203
|
-
// Collect all input elements with the matching name inside those fields
|
|
204
|
-
const groupElements = groupFields.flatMap(edsField => {
|
|
205
|
-
var _a;
|
|
206
|
-
return Array.from(((_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`input[name="${name}"]`)) || []);
|
|
207
|
-
});
|
|
208
|
-
//console.log(`validateFieldGroup - Found ${groupElements.length} elements for ${name}:`, groupElements);
|
|
209
|
-
const isChecked = groupElements.some(el => el.checked);
|
|
210
|
-
const errors = [];
|
|
211
|
-
if (required && !isChecked) {
|
|
212
|
-
errors.push(`At least one option in ${name} is required.`);
|
|
213
|
-
}
|
|
214
|
-
return errors;
|
|
215
|
-
}
|
|
216
|
-
validateSingleBox(name, required) {
|
|
217
|
-
var _a;
|
|
218
|
-
const errors = [];
|
|
219
|
-
// Find the eds-input-field that contains the input
|
|
220
|
-
const edsField = Array.from(this.formEl.querySelectorAll('eds-input-field')).find(field => {
|
|
221
|
-
var _a;
|
|
222
|
-
return (_a = field.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${name}"]`);
|
|
223
|
-
});
|
|
224
|
-
// If not found, handle the error or return early.
|
|
225
|
-
if (!edsField) {
|
|
226
|
-
if (required) {
|
|
227
|
-
errors.push(`${name} is required.`);
|
|
228
|
-
}
|
|
229
|
-
return errors;
|
|
230
|
-
}
|
|
231
|
-
// Now query within the shadow root of the found component.
|
|
232
|
-
const checkboxElement = (_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${name}"]`);
|
|
233
|
-
if (required && checkboxElement && !checkboxElement.checked) {
|
|
234
|
-
errors.push(`${name} is required.`);
|
|
235
|
-
}
|
|
236
|
-
return errors;
|
|
237
|
-
}
|
|
238
111
|
validateForm() {
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
const fieldErrors = this.validateSingleBox(field.name, field.required);
|
|
246
|
-
if (fieldErrors.length > 0) {
|
|
247
|
-
this.errors[field.name] = fieldErrors;
|
|
248
|
-
this.hasError = true;
|
|
249
|
-
}
|
|
250
|
-
} else if (field.options && (field.type === 'checkbox' || field.type === 'radio')) {
|
|
251
|
-
const fieldErrors = this.validateFieldGroup(field.name, field.type, field.required);
|
|
252
|
-
if (fieldErrors.length > 0) {
|
|
253
|
-
this.errors[field.name] = fieldErrors;
|
|
254
|
-
this.hasError = true;
|
|
255
|
-
}
|
|
256
|
-
} else {
|
|
257
|
-
const fieldElement = this.findFieldElement(field.name);
|
|
258
|
-
if (fieldElement) {
|
|
259
|
-
const value = fieldElement.value;
|
|
260
|
-
const fieldErrors = this.validateField(field.name, value, field.type, field.required, field.maxlength);
|
|
261
|
-
if (fieldErrors.length > 0) {
|
|
262
|
-
this.errors[field.name] = fieldErrors;
|
|
263
|
-
this.hasError = true;
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
}
|
|
112
|
+
const {
|
|
113
|
+
errors,
|
|
114
|
+
hasError
|
|
115
|
+
} = validateFormFields(this.parsedFields, this.formEl, this.values, (field, values) => {
|
|
116
|
+
if (!field.condition) {
|
|
117
|
+
return true;
|
|
267
118
|
}
|
|
119
|
+
const parentValue = values[field.condition.field];
|
|
120
|
+
return parentValue === field.condition.value;
|
|
268
121
|
});
|
|
122
|
+
this.errors = errors;
|
|
123
|
+
this.hasError = hasError;
|
|
269
124
|
}
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
125
|
+
populateFormWithDraftData(draftData) {
|
|
126
|
+
const {
|
|
127
|
+
updatedValues
|
|
128
|
+
} = getFormDraftData({
|
|
129
|
+
draftData,
|
|
130
|
+
parsedFields: this.parsedFields,
|
|
131
|
+
currentValues: this.values,
|
|
132
|
+
formEl: this.formEl,
|
|
133
|
+
isFieldVisible: (field, values) => {
|
|
134
|
+
if (!field.condition) {
|
|
135
|
+
return true;
|
|
278
136
|
}
|
|
137
|
+
const parentValue = values[field.condition.field];
|
|
138
|
+
return parentValue === field.condition.value;
|
|
279
139
|
}
|
|
280
|
-
}
|
|
281
|
-
|
|
140
|
+
});
|
|
141
|
+
this.values = updatedValues;
|
|
282
142
|
}
|
|
283
|
-
|
|
143
|
+
getFormData() {
|
|
144
|
+
var _a;
|
|
284
145
|
const formData = new FormData();
|
|
285
146
|
// Add the form name
|
|
286
147
|
formData.append('form_name', this.name);
|
|
148
|
+
// Add the form URL
|
|
149
|
+
if (this.setFormUrl && typeof window !== 'undefined') {
|
|
150
|
+
formData.set('form_url', window.location.href);
|
|
151
|
+
}
|
|
152
|
+
// Add the signed in user if exists
|
|
153
|
+
if (this.user) {
|
|
154
|
+
formData.set('form_user', (_a = this.user) === null || _a === void 0 ? void 0 : _a.email);
|
|
155
|
+
}
|
|
287
156
|
// Get all input elements within `eds-input-field`
|
|
288
157
|
const elements = Array.from(this.formEl.querySelectorAll('eds-input-field'));
|
|
289
158
|
elements.forEach(element => {
|
|
@@ -316,38 +185,168 @@ const EdsForm = class {
|
|
|
316
185
|
});
|
|
317
186
|
return formData;
|
|
318
187
|
}
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
188
|
+
handleChange(e, field) {
|
|
189
|
+
const target = e.target;
|
|
190
|
+
this.values = Object.assign(Object.assign({}, this.values), {
|
|
191
|
+
[field.name]: target.value
|
|
192
|
+
});
|
|
193
|
+
// Emit an input event with message and current form values
|
|
194
|
+
this.form.emit({
|
|
195
|
+
event: 'change',
|
|
196
|
+
field: field.name,
|
|
197
|
+
value: target.value,
|
|
198
|
+
message: `${field.name} updated`,
|
|
199
|
+
data: this.getFormData()
|
|
200
|
+
});
|
|
201
|
+
if (this.shouldFormAcceptDraft) {
|
|
202
|
+
this.postFormDataWithoutValidation();
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
handleInput(e, field) {
|
|
206
|
+
const target = e.target;
|
|
207
|
+
// Update the field's value in state.
|
|
208
|
+
this.values = Object.assign(Object.assign({}, this.values), {
|
|
209
|
+
[field.name]: target.value
|
|
210
|
+
});
|
|
211
|
+
// Create a copy of the current errors.
|
|
212
|
+
const newErrors = Object.assign({}, this.errors);
|
|
213
|
+
// Use the utility to validate the field.
|
|
214
|
+
const fieldErrors = validateInputField(field, target.value, this.formEl);
|
|
215
|
+
if (fieldErrors.length > 0) {
|
|
216
|
+
newErrors[field.name] = fieldErrors;
|
|
217
|
+
} else {
|
|
218
|
+
delete newErrors[field.name];
|
|
219
|
+
}
|
|
220
|
+
// Update the errors state and the hasError flag.
|
|
221
|
+
this.errors = newErrors;
|
|
222
|
+
this.hasError = Object.keys(newErrors).length > 0;
|
|
223
|
+
}
|
|
224
|
+
async handleSubmit(e) {
|
|
225
|
+
var _a, _b;
|
|
226
|
+
e.preventDefault();
|
|
227
|
+
if (this.isSubmitting) {
|
|
228
|
+
return;
|
|
229
|
+
}
|
|
230
|
+
this.validateForm();
|
|
231
|
+
if (this.hasError) {
|
|
232
|
+
this.form.emit({
|
|
233
|
+
event: 'submit',
|
|
234
|
+
validated: false,
|
|
235
|
+
success: false,
|
|
236
|
+
message: this.errorMessage,
|
|
237
|
+
data: this.getFormData()
|
|
238
|
+
}); // Emit form status submit false validation error
|
|
239
|
+
sendAnalytics({
|
|
240
|
+
category: 'ui-component',
|
|
241
|
+
parentContext: null,
|
|
242
|
+
tag: this.el.tagName.toLowerCase(),
|
|
243
|
+
name: `${(_a = this.submitBtnLabel) === null || _a === void 0 ? void 0 : _a.toLowerCase()}/error` || '',
|
|
244
|
+
action: 'click'
|
|
245
|
+
});
|
|
246
|
+
this.alertMessage = this.errorMessage;
|
|
247
|
+
return;
|
|
248
|
+
}
|
|
249
|
+
this.isSubmitting = true;
|
|
250
|
+
this.formSubmitted = false;
|
|
251
|
+
this.alertMessage = null;
|
|
252
|
+
this.errors = {};
|
|
253
|
+
const formData = await this.getFormData();
|
|
254
|
+
formData.set('draft', 'false');
|
|
255
|
+
formData.set('completed', 'true');
|
|
256
|
+
// If no endpoint is provided, just emit the data and stop here.
|
|
257
|
+
if (!this.endpoint) {
|
|
258
|
+
// Successful submission, since there’s no server to reject it.
|
|
259
|
+
this.form.emit({
|
|
260
|
+
event: 'submit',
|
|
261
|
+
success: true,
|
|
262
|
+
validated: true,
|
|
263
|
+
message: 'Form data validated successfully',
|
|
264
|
+
data: formData
|
|
265
|
+
});
|
|
266
|
+
// Reset form states
|
|
267
|
+
this.formSubmitted = true;
|
|
268
|
+
this.formEl.reset();
|
|
269
|
+
this.isSubmitting = false;
|
|
270
|
+
return;
|
|
271
|
+
}
|
|
272
|
+
// Log each entry in FormData to see file details
|
|
273
|
+
/*formData.forEach((value, key) => {
|
|
274
|
+
if (value instanceof File) {
|
|
275
|
+
console.log(`File field: ${key}, File name: ${value.name}, File size: ${value.size}`);
|
|
328
276
|
} else {
|
|
329
|
-
|
|
277
|
+
console.log(`Field: ${key}, Value: ${value}`);
|
|
330
278
|
}
|
|
279
|
+
});*/
|
|
280
|
+
// Build headers based on auth settings.
|
|
281
|
+
const headers = {
|
|
282
|
+
Authorization: `Bearer ${this.user.token}`
|
|
283
|
+
};
|
|
284
|
+
try {
|
|
285
|
+
// Use the API utility to post the form data.
|
|
286
|
+
const data = await post(this.endpoint, formData, {
|
|
287
|
+
headers
|
|
288
|
+
});
|
|
289
|
+
this.form.emit({
|
|
290
|
+
event: 'submit',
|
|
291
|
+
success: true,
|
|
292
|
+
validated: true,
|
|
293
|
+
message: data.message,
|
|
294
|
+
data: formData
|
|
295
|
+
}); // Emit form status submit true
|
|
296
|
+
this.formSubmitted = true;
|
|
297
|
+
this.formEl.reset();
|
|
298
|
+
sendAnalytics({
|
|
299
|
+
category: 'ui-component',
|
|
300
|
+
parentContext: null,
|
|
301
|
+
tag: this.el.tagName.toLowerCase(),
|
|
302
|
+
name: `${(_b = this.submitBtnLabel) === null || _b === void 0 ? void 0 : _b.toLowerCase()}/success` || '',
|
|
303
|
+
action: 'click'
|
|
304
|
+
});
|
|
305
|
+
} catch (err) {
|
|
306
|
+
this.hasError = true;
|
|
307
|
+
this.form.emit({
|
|
308
|
+
event: 'submit',
|
|
309
|
+
success: false,
|
|
310
|
+
validated: true,
|
|
311
|
+
message: err,
|
|
312
|
+
data: formData
|
|
313
|
+
}); // Emit form status submit error
|
|
314
|
+
} finally {
|
|
315
|
+
this.isSubmitting = false;
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
async postFormDataWithoutValidation() {
|
|
319
|
+
var _a;
|
|
320
|
+
if (!this.endpoint) {
|
|
321
|
+
return;
|
|
322
|
+
}
|
|
323
|
+
const formData = await this.getFormData();
|
|
324
|
+
formData.set('draft', this.draft.toString());
|
|
325
|
+
const headers = {
|
|
326
|
+
Authorization: `Bearer ${(_a = this.user) === null || _a === void 0 ? void 0 : _a.token}`
|
|
327
|
+
};
|
|
328
|
+
try {
|
|
329
|
+
await post(this.endpoint, formData, {
|
|
330
|
+
headers
|
|
331
|
+
});
|
|
331
332
|
} catch (error) {
|
|
332
|
-
|
|
333
|
-
console.error('Error parsing fields prop:', error);
|
|
334
|
-
this.parsedFields = [];
|
|
333
|
+
throw error;
|
|
335
334
|
}
|
|
336
335
|
}
|
|
337
336
|
render() {
|
|
338
337
|
const hiddenFields = this.parsedFields.filter(field => field.type === 'hidden');
|
|
339
338
|
const otherFields = this.parsedFields.filter(field => field.type !== 'hidden');
|
|
340
339
|
return h("form", {
|
|
341
|
-
key: '
|
|
340
|
+
key: '7ea50f19b8810fb0294bc8527d1c86e74dfc2b69',
|
|
342
341
|
ref: el => this.formEl = el,
|
|
343
342
|
enctype: "multipart/form-data",
|
|
344
343
|
autocomplete: "on",
|
|
345
344
|
method: "post",
|
|
346
345
|
onSubmit: this.handleSubmit
|
|
347
346
|
}, h("div", {
|
|
348
|
-
key: '
|
|
347
|
+
key: '29e821a2eb706c51fa303b1abf645baeea5ae9d4'
|
|
349
348
|
}, h("slot", {
|
|
350
|
-
key: '
|
|
349
|
+
key: 'b45d74e9a147ab1a932891210c7813d3bd118b07'
|
|
351
350
|
}), hiddenFields.map((field, index) => h("eds-input", {
|
|
352
351
|
key: index,
|
|
353
352
|
type: "hidden",
|
|
@@ -370,27 +369,28 @@ const EdsForm = class {
|
|
|
370
369
|
hint: field.hint,
|
|
371
370
|
error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0,
|
|
372
371
|
errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'),
|
|
373
|
-
onInput: e => this.
|
|
372
|
+
onInput: e => this.handleInput(e, field),
|
|
373
|
+
onChange: e => this.handleChange(e, field),
|
|
374
374
|
class: index > 0 ? 'mt-20' : '',
|
|
375
375
|
options: field.options
|
|
376
376
|
});
|
|
377
377
|
})), this.submitBtn && h("div", {
|
|
378
|
-
key: '
|
|
378
|
+
key: '0a9b9027fc235cd099cc40903bd6711873b9868b',
|
|
379
379
|
class: "mt-20"
|
|
380
380
|
}, h("eds-button", {
|
|
381
|
-
key: '
|
|
381
|
+
key: 'f7181c19d04a117817f556753cc95c1f49c9fa1c',
|
|
382
382
|
intent: "primary",
|
|
383
383
|
label: this.submitBtnLabel,
|
|
384
|
-
disabled: this.isSubmitting || this.coupleAuth && !this.isAuthenticated,
|
|
384
|
+
disabled: this.isSubmitting || this.coupleAuth && !this.isAuthenticated || this.formSubmitted,
|
|
385
385
|
loading: this.isSubmitting,
|
|
386
386
|
onClick: e => this.handleSubmit(e)
|
|
387
387
|
}), this.coupleAuth && !this.isAuthenticated ? h("p", {
|
|
388
388
|
class: "f-ui-05 text-lighter mt-8 ml-8"
|
|
389
389
|
}, this.submitBtnHintMessage) : null), this.alertMessage && (this.formSubmitted || this.hasError) && h("div", {
|
|
390
|
-
key: '
|
|
390
|
+
key: 'b999356ec8fc57fc85c2f672a94e95f834d153ea',
|
|
391
391
|
class: "mt-20"
|
|
392
392
|
}, h("eds-alert", {
|
|
393
|
-
key: '
|
|
393
|
+
key: '5a743b01991fb5d8f5358abc44639e790f5264ea',
|
|
394
394
|
message: this.alertMessage,
|
|
395
395
|
intent: this.hasError ? 'error' : 'success',
|
|
396
396
|
direction: "horizontal"
|