@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

@layer al.reset, al.base, al.theme, al.component, al.override;
/* This file is auto-generated by Style Dictionary. Do not edit directly. */
/* ------------------------------------*\
  #MIXINS
\*------------------------------------ */
/* ------------------------------------*\
  #TYPOGRAPHY TIER-1 MIXINS
\*------------------------------------ */
/**
 * Each preset is a CSS `font` shorthand plus its tracking.
 *
 * `font` can only carry style/variant/weight/stretch/size/line-height/family.
 * The composite typography token also authors `letterSpacing` (and
 * `textDecoration`), which the shorthand cannot express — so the token
 * pipeline emits a companion `--al-typography-preset-<n>[-bold]-letter-spacing`
 * custom property alongside each preset, and these mixins are what read it.
 * Before that, every `letterSpacing` the designers authored was dropped by
 * `formatTypographyValue` and had no effect on any rendered page.
 *
 * There is no CSS fallback on these reads, deliberately: the pipeline emits a
 * companion for EVERY preset, including the ones whose authored tracking is
 * zero (as the keyword `normal`), so a brand can restate any of them. Declaring
 * letter-spacing on every preset rather than only the tracked ones matters
 * because the `font` shorthand does not reset `letter-spacing` — without it a
 * preset used inside a tracked ancestor would inherit that ancestor's tracking.
 *
 * The `!important` on the bold tracking mirrors the `font-weight` above it and
 * exists for the same reason: Sass hoists the responsive @media block after the
 * flat declarations, so without it a bold preset would pick up the SMALLER
 * regular preset's tracking below the md breakpoint.
 */
/* ------------------------------------*\
  #TYPOGRAPHY TIER-2 MIXINS
\*------------------------------------ */
/**
 * The SEMANTIC type scale, and the layer 109 component call sites actually use.
 *
 * These read the tier-2 custom properties directly. They used to delegate to
 * the tier-1 preset mixins (`@include al-typography-preset-heading-lg`), which made the
 * semantic layer a BUILD-TIME indirection: every component compiled down to
 * `font: var(--al-typography-preset-heading-lg)`, so the tier-2 custom properties had
 * one `var()` reader in the whole repo (`styles/core/base.scss`) and a brand
 * restating `--al-theme-typography-heading-lg` on its `<al-theme>` host changed
 * nothing. Reading the tier-2 name keeps the same resolved value -- each tier-2
 * token is a whole-string alias of the tier-1 preset that used to be inlined --
 * but resolves it at RUNTIME, where the brand/mode cascade can reach it.
 *
 * The responsive step-down is expressed in tier-2 names too. It is the same
 * ladder the tier-1 mixins encoded (20->18, 24->20, 36->24, 40->36, 44->40,
 * 48->44); every one of those targets happens to have a tier-2 name, so this
 * is a rename of the existing behaviour, not a new design decision.
 */
/**
 * Body
 */
/**
 * Heading
 */
/**
 * Display
 */
/* ------------------------------------*\
  #MIXINS
\*------------------------------------ */
/* ------------------------------------*\
  #GENERAL MIXINS
\*------------------------------------ */
/* ------------------------------------*\
  #VISIBILITY
\*------------------------------------ */
/**
 * Visually hidden from display
 */
/* ------------------------------------*\
  #FORMS
\*------------------------------------ */
/**
 * Label
 */
/**
 * Input
 */
/* ------------------------------------*\
  #LINK
\*------------------------------------ */
/**
 * Styles to override button styling
 */
/**
 * Link styles
 */
/* ------------------------------------*\
  #FOCUS
\*------------------------------------ */
/**
 * Visible focus outline for elements.
 *
 * `--al-theme-color-focus-ring` is a REAL tier-3 token (tokens/tier-3/theme/
 * {light,dark}/colors.json), so no hardcoded fallback belongs here. It used to
 * read `var(--al-theme-color-focus-ring, var(--al-theme-color-border-primary-default))`
 * against a name the pipeline never emitted — the fallback always won, which put
 * the focus-ring colour outside design-system control: no brand, mode or
 * `<al-theme>` host could restate it.
 */
/* ------------------------------------*\
  #MOTION MIXINS
\*------------------------------------ */
/**
 * Tier 1/2 ergonomics for the motion system.
 *
 * WHY MIXINS AND NOT TOKENS
 *
 * The WP starter kit this system is ported from ships ready-made "use-case"
 * tokens on `:root` — `--motion-use-hover: var(--motion-duration-quick)
 * var(--motion-easing-standard)` and so on — and components apply them straight
 * to `transition`. That works there because `:root` is the only scope, so the
 * reduced-motion media query re-declares the durations on the SAME element that
 * declares the use-case token, and the substitution picks up the new value.
 *
 * It does not work in Altitude. A custom property's `var()` references are
 * resolved ONCE, at the element that declares it, and what inherits down the
 * tree is the resolved VALUE, not a live formula. A `--al-theme-animation-use-*`
 * token declared in `:root` would therefore bake in `:root`'s durations and go
 * blind to every `<al-theme motion="reduced">` below it — exactly the bug
 * `.altitude/AXES.md` section 2.3 documents and proves for the role tokens.
 *
 * A mixin sidesteps the whole class of problem: it expands at the CALL SITE, so
 * the `var()` chain is resolved against the component's own element, where the
 * governing `<al-theme>`'s values are in scope.
 */
/* ------------------------------------*\
  #TRANSITIONS
\*------------------------------------ */
/**
 * Emit a transition using the theme's motion role tokens.
 *
 * Expands to the `var(--role, var(--legacy))` fallback pattern that wired
 * components already write by hand (see `accordion-panel.scss:39`), so the
 * `<al-theme motion>` axis governs it and un-themed usage still gets a sane
 * default.
 *
 * @param {list}   $properties - CSS properties to transition. Default `all`.
 * @param {string} $role       - `fast` | `base` | `slow`. Default `base`.
 * @param {string} $timing     - `standard` | `emphasized`. Default `standard`.
 *
 * @example
 *   .al-c-thing { @include al-motion-transition(background-color border-color, fast); }
 *   .al-c-panel { @include al-motion-transition(height, slow, emphasized); }
 */
/* ------------------------------------*\
  #TEXT REVEAL
\*------------------------------------ */
/**
 * The "invisible wall" for the `text-reveal` choreography token.
 *
 * This is the one piece of Tier 3 that MUST live in CSS. Every other keyframe
 * preset animates the element itself, but a mask reveal needs an
 * `overflow: hidden` wrapper for the text to rise out from behind — WAAPI can
 * translate the text but it cannot clip it.
 *
 * Structure: each line is a static WALL wrapping a MOVER, and they have to be
 * separate elements. Clipping the mover itself would move the clip region along
 * with it and reveal nothing.
 *
 *   <h2 class="al-c-hero__heading">
 *     <span class="al-c-hero__line"><span data-al-motion-line>Rising up</span></span>
 *     <span class="al-c-hero__line"><span data-al-motion-line>from behind a wall</span></span>
 *   </h2>
 *
 *   .al-c-hero__heading { @include al-motion-text-reveal('.al-c-hero__line'); }
 *
 * One `[data-al-motion-line]` rises as a single block; several cascade
 * line-by-line, because the token collects them in DOM order.
 *
 * No arming rule is emitted. The MotionController arms with a paused,
 * backwards-filled WAAPI animation instead of a CSS class, so there is no
 * `.is-inview` contract to honour and nothing to un-hide if JS never runs.
 *
 * @param {string} $wall - selector for the wall element, relative to the block.
 */
/**
 * Word-cascade variant. Walls go inline-block so words flow and wrap naturally;
 * `vertical-align` keeps them sitting on a shared baseline. Responsive by
 * construction — there is no line measurement and nothing to re-split on
 * resize.
 *
 * @param {string} $wall - selector for the wall element, relative to the block.
 */
/* This file is auto-generated by Style Dictionary. Do not edit directly. */
:root {
  --al-animation-duration-1: 0.1s;
  --al-animation-duration-2: 0.2s;
  --al-animation-duration-3: 0.3s;
  --al-animation-duration-4: 0.4s;
  --al-animation-duration-6: 0.6s;
  --al-animation-duration-8: 0.8s;
  --al-animation-duration-12: 1.2s;
  --al-animation-timing-ease: ease;
  --al-animation-timing-linear: linear;
  --al-animation-timing-cubic-bezier: cubic-bezier(0.15,0.99,0.18,0.99);
  --al-animation-timing-emphasized: cubic-bezier(0.2,0,0,1);
  --al-animation-timing-spring: cubic-bezier(0.34,1.56,0.64,1);
  --al-animation-timing-standard: cubic-bezier(0.45,0.05,0.25,0.95);
  --al-animation-timing-entrance: cubic-bezier(0,0,0.2,1);
  --al-animation-timing-exit: cubic-bezier(0.5,0,1,1);
  --al-animation-timing-gentle: cubic-bezier(0.76,0,0.24,1);
  --al-animation-distance-sm: 8px;
  --al-animation-distance-md: 24px;
  --al-animation-distance-lg: 64px;
  --al-border-width-1: 1px;
  --al-border-width-2: 2px;
  --al-border-width-4: 4px;
  --al-border-radius-0: 0px;
  --al-border-radius-2: 2px;
  --al-border-radius-4: 4px;
  --al-border-radius-6: 6px;
  --al-border-radius-8: 8px;
  --al-border-radius-12: 12px;
  --al-border-radius-16: 16px;
  --al-border-radius-24: 24px;
  --al-border-radius-round: 50%;
  --al-border-radius-pill: 999px;
  --al-color-danger-100: #fdecec;
  --al-color-danger-200: #f5d2d4;
  --al-color-danger-300: #ff8b92;
  --al-color-danger-400: #ff6d76;
  --al-color-danger-500: #d63d47;
  --al-color-danger-600: #cc2b36;
  --al-color-danger-700: #bf323c;
  --al-color-danger-800: #4d2327;
  --al-color-danger-900: #38191c;
  --al-color-info-100: #dbe5ff;
  --al-color-info-200: #b3c7ff;
  --al-color-info-300: #8fadff;
  --al-color-info-400: #6b93ff;
  --al-color-info-500: #4375ff;
  --al-color-info-600: #2f62ef;
  --al-color-info-700: #2d56ca;
  --al-color-info-800: #0c3197;
  --al-color-info-900: #000b29;
  --al-color-neutral-100: #ffffff;
  --al-color-neutral-200: #f1f0ea;
  --al-color-neutral-300: #d5d3cc;
  --al-color-neutral-400: #a5a399;
  --al-color-neutral-500: #7c7a70;
  --al-color-neutral-600: #6f6b61;
  --al-color-neutral-700: #3c3c35;
  --al-color-neutral-800: #1d1d1a;
  --al-color-neutral-850: #181816;
  --al-color-neutral-900: #131311;
  --al-color-neutral-alpha-100-10: rgba(255, 255, 255, 0.1);
  --al-color-neutral-alpha-100-30: rgba(255, 255, 255, 0.3);
  --al-color-neutral-alpha-100-60: rgba(255, 255, 255, 0.6);
  --al-color-neutral-alpha-100-80: rgba(255, 255, 255, 0.8);
  --al-color-neutral-alpha-300-10: rgba(231, 229, 222, 0.1);
  --al-color-neutral-alpha-300-30: rgba(231, 229, 222, 0.3);
  --al-color-neutral-alpha-300-60: rgba(231, 229, 222, 0.6);
  --al-color-neutral-alpha-300-80: rgba(231, 229, 222, 0.8);
  --al-color-neutral-alpha-500-10: rgba(124, 122, 112, 0.1);
  --al-color-neutral-alpha-500-30: rgba(124, 122, 112, 0.3);
  --al-color-neutral-alpha-500-60: rgba(124, 122, 112, 0.6);
  --al-color-neutral-alpha-500-80: rgba(124, 122, 112, 0.8);
  --al-color-neutral-alpha-900-10: rgba(19, 19, 17, 0.1);
  --al-color-neutral-alpha-900-30: rgba(19, 19, 17, 0.3);
  --al-color-neutral-alpha-900-60: rgba(19, 19, 17, 0.6);
  --al-color-neutral-alpha-900-80: rgba(19, 19, 17, 0.8);
  --al-color-neutral-dark-100: #d9d9d9;
  --al-color-neutral-dark-200: #b0b0b0;
  --al-color-neutral-dark-300: #8a8a8a;
  --al-color-neutral-dark-400: #616161;
  --al-color-neutral-dark-500: #3a3a3a;
  --al-color-neutral-dark-600: #2e2e2e;
  --al-color-neutral-dark-700: #181818;
  --al-color-neutral-dark-800: #101010;
  --al-color-neutral-dark-900: #000000;
  --al-color-neutral-light-100: #ffffff;
  --al-color-neutral-light-200: #f8f8f6;
  --al-color-neutral-light-300: #f4f3f1;
  --al-color-neutral-light-400: #f2f1ee;
  --al-color-neutral-light-500: #edece8;
  --al-color-neutral-light-600: #e9e7e2;
  --al-color-neutral-light-700: #e6e5e0;
  --al-color-neutral-light-800: #e2e0da;
  --al-color-neutral-light-900: #bdb39e;
  --al-color-primary-100: #e9eefc;
  --al-color-primary-200: #d4dff8;
  --al-color-primary-300: #a3b5ff;
  --al-color-primary-400: #8ea6ff;
  --al-color-primary-500: #2e5ce6;
  --al-color-primary-600: #2450cc;
  --al-color-primary-700: #303d66;
  --al-color-primary-800: #2b3a63;
  --al-color-primary-900: #0e1834;
  --al-color-primary-alpha-100-10: rgba(233, 238, 252, 0.1);
  --al-color-primary-alpha-100-30: rgba(233, 238, 252, 0.3);
  --al-color-primary-alpha-100-60: rgba(233, 238, 252, 0.6);
  --al-color-primary-alpha-100-80: rgba(233, 238, 252, 0.8);
  --al-color-primary-alpha-500-10: rgba(46, 92, 230, 0.1);
  --al-color-primary-alpha-500-30: rgba(46, 92, 230, 0.3);
  --al-color-primary-alpha-500-60: rgba(46, 92, 230, 0.6);
  --al-color-primary-alpha-500-80: rgba(46, 92, 230, 0.8);
  --al-color-primary-alpha-900-10: rgba(14, 24, 52, 0.1);
  --al-color-primary-alpha-900-30: rgba(14, 24, 52, 0.3);
  --al-color-primary-alpha-900-60: rgba(14, 24, 52, 0.6);
  --al-color-primary-alpha-900-80: rgba(14, 24, 52, 0.8);
  --al-color-secondary-100: #f5eee0;
  --al-color-secondary-200: #e6dac1;
  --al-color-secondary-300: #d5c7aa;
  --al-color-secondary-400: #c0b191;
  --al-color-secondary-500: #a49981;
  --al-color-secondary-600: #958156;
  --al-color-secondary-700: #78643b;
  --al-color-secondary-800: #534422;
  --al-color-secondary-900: #191306;
  --al-color-secondary-alpha-100-10: rgba(245, 238, 224, 0.1);
  --al-color-secondary-alpha-100-30: rgba(245, 238, 224, 0.3);
  --al-color-secondary-alpha-100-60: rgba(245, 238, 224, 0.6);
  --al-color-secondary-alpha-100-80: rgba(245, 238, 224, 0.8);
  --al-color-secondary-alpha-500-10: rgba(164, 153, 129, 0.1);
  --al-color-secondary-alpha-500-30: rgba(164, 153, 129, 0.3);
  --al-color-secondary-alpha-500-60: rgba(164, 153, 129, 0.6);
  --al-color-secondary-alpha-500-80: rgba(164, 153, 129, 0.8);
  --al-color-secondary-alpha-900-10: rgba(25, 19, 6, 0.1);
  --al-color-secondary-alpha-900-30: rgba(25, 19, 6, 0.3);
  --al-color-secondary-alpha-900-60: rgba(25, 19, 6, 0.6);
  --al-color-secondary-alpha-900-80: rgba(25, 19, 6, 0.8);
  --al-color-success-100: #e6f4ec;
  --al-color-success-200: #cbe8d6;
  --al-color-success-300: #8be1b0;
  --al-color-success-400: #4cd98a;
  --al-color-success-500: #188a4e;
  --al-color-success-600: #157b46;
  --al-color-success-700: #1a633a;
  --al-color-success-800: #1e4a2e;
  --al-color-success-900: #14301f;
  --al-color-tertiary-100: #e9f1f1;
  --al-color-tertiary-200: #d1e1e1;
  --al-color-tertiary-300: #bbd3d3;
  --al-color-tertiary-400: #a2c2c3;
  --al-color-tertiary-500: #8bb3b4;
  --al-color-tertiary-600: #649a9b;
  --al-color-tertiary-700: #4c7576;
  --al-color-tertiary-800: #324d4d;
  --al-color-tertiary-900: #0c1213;
  --al-color-tertiary-alpha-100-10: rgba(233, 241, 241, 0.1);
  --al-color-tertiary-alpha-100-30: rgba(233, 241, 241, 0.3);
  --al-color-tertiary-alpha-100-60: rgba(233, 241, 241, 0.6);
  --al-color-tertiary-alpha-100-80: rgba(233, 241, 241, 0.8);
  --al-color-tertiary-alpha-500-10: rgba(139, 179, 180, 0.1);
  --al-color-tertiary-alpha-500-30: rgba(139, 179, 180, 0.3);
  --al-color-tertiary-alpha-500-60: rgba(139, 179, 180, 0.6);
  --al-color-tertiary-alpha-500-80: rgba(139, 179, 180, 0.8);
  --al-color-tertiary-alpha-900-10: rgba(12, 18, 19, 0.1);
  --al-color-tertiary-alpha-900-30: rgba(12, 18, 19, 0.3);
  --al-color-tertiary-alpha-900-60: rgba(12, 18, 19, 0.6);
  --al-color-tertiary-alpha-900-80: rgba(12, 18, 19, 0.8);
  --al-color-transparent-0: rgba(0, 0, 0, 0);
  --al-color-warning-100: #faf1da;
  --al-color-warning-200: #eedfb4;
  --al-color-warning-300: #f1cc7b;
  --al-color-warning-400: #f5b942;
  --al-color-warning-500: #996b00;
  --al-color-warning-600: #906500;
  --al-color-warning-700: #6d510e;
  --al-color-warning-800: #4a3c1c;
  --al-color-warning-900: #2f2610;
  --al-opacity-0: 0;
  --al-opacity-24: 0.24;
  --al-opacity-40: 0.4;
  --al-opacity-80: 0.8;
  --al-opacity-100: 1;
  --al-box-shadow-2: 0px 2px 2px 0px rgba(19, 19, 17, 0.6);
  --al-box-shadow-4: 0px 4px 4px 0px rgba(19, 19, 17, 0.6), 0px 2px 2px 0px rgba(19, 19, 17, 0.6);
  --al-box-shadow-8: 0px 8px 8px 0px rgba(19, 19, 17, 0.6), 0px 4px 4px 0px rgba(19, 19, 17, 0.6), 0px 2px 2px 0px rgba(19, 19, 17, 0.6);
  --al-box-shadow-16: 0px 16px 16px 0px rgba(19, 19, 17, 0.6), 0px 8px 8px 0px rgba(19, 19, 17, 0.6), 0px 4px 4px 0px rgba(19, 19, 17, 0.6), 0px 2px 2px 0px rgba(19, 19, 17, 0.6);
  --al-box-shadow-32: 0px 32px 32px 0px rgba(19, 19, 17, 0.6), 0px 16px 16px 0px rgba(19, 19, 17, 0.6), 0px 8px 8px 0px rgba(19, 19, 17, 0.6), 0px 4px 4px 0px rgba(19, 19, 17, 0.6), 0px 2px 2px 0px rgba(19, 19, 17, 0.6);
  --al-box-shadow-48: 0px 48px 48px 0px rgba(19, 19, 17, 0.6), 0px 32px 32px 0px rgba(19, 19, 17, 0.6), 0px 16px 16px 0px rgba(19, 19, 17, 0.6), 0px 8px 8px 0px rgba(19, 19, 17, 0.6), 0px 4px 4px 0px rgba(19, 19, 17, 0.6), 0px 2px 2px 0px rgba(19, 19, 17, 0.6);
  --al-box-shadow-hard-2: 2px 2px 0px 0px #8ea6ff;
  --al-box-shadow-hard-4: 4px 4px 0px 0px #8ea6ff;
  --al-box-shadow-none: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  --al-box-shadow-raised: 0px 1px 2px 0px rgba(19, 19, 17, 0.6);
  --al-box-shadow-overlay: 0px 8px 24px 0px rgba(19, 19, 17, 0.6);
  --al-box-shadow-overlay-lg: 0px 12px 32px -8px rgba(19, 19, 17, 0.6);
  --al-box-shadow-overlay-xl: 0px 24px 48px -12px rgba(19, 19, 17, 0.6);
  --al-font-family-primary: Public Sans;
  --al-font-family-plex: IBM Plex Sans;
  --al-font-family-secondary: Agrandir;
  --al-font-family-editorial: Georgia, Cambria, serif;
  --al-font-family-mono: IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --al-font-family-grotesk: Archivo, Arial, sans-serif;
  --al-font-family-tech: Space Grotesk, Arial, sans-serif;
  --al-font-family-soft: DM Sans, Verdana, sans-serif;
  --al-font-family-modern: Sora, Verdana, sans-serif;
  --al-line-height-14: 14px;
  --al-line-height-16: 16px;
  --al-line-height-20: 20px;
  --al-line-height-24: 24px;
  --al-line-height-28: 28px;
  --al-line-height-32: 32px;
  --al-line-height-36: 36px;
  --al-line-height-40: 40px;
  --al-line-height-44: 44px;
  --al-line-height-48: 48px;
  --al-line-height-52: 52px;
  --al-line-height-60: 60px;
  --al-line-height-72: 72px;
  --al-line-height-110: 110px;
  --al-font-weight-regular: 400;
  --al-font-weight-medium: 500;
  --al-font-weight-semibold: 600;
  --al-font-weight-bold: 700;
  --al-font-size-10: 10px;
  --al-font-size-12: 12px;
  --al-font-size-14: 14px;
  --al-font-size-16: 16px;
  --al-font-size-20: 20px;
  --al-font-size-24: 24px;
  --al-font-size-28: 28px;
  --al-font-size-32: 32px;
  --al-font-size-36: 36px;
  --al-font-size-48: 48px;
  --al-font-size-56: 56px;
  --al-font-size-64: 64px;
  --al-font-size-72: 72px;
  --al-font-size-112: 112px;
  --al-letter-spacing-0: 0%;
  --al-letter-spacing-1: 1%;
  --al-text-decoration-none: none;
  --al-typography-preset-body-xs: 400 0.75rem/1.25rem Public Sans, sans-serif;
  --al-typography-preset-body-xs-letter-spacing: normal;
  --al-typography-preset-body-xs-medium: 500 0.75rem/1.25rem Public Sans, sans-serif;
  --al-typography-preset-body-xs-medium-letter-spacing: normal;
  --al-typography-preset-body-xs-semibold: 600 0.75rem/1.25rem Public Sans, sans-serif;
  --al-typography-preset-body-xs-semibold-letter-spacing: 0.01em;
  --al-typography-preset-body-xs-bold: 700 0.75rem/1.25rem Public Sans, sans-serif;
  --al-typography-preset-body-xs-bold-letter-spacing: 0.01em;
  --al-typography-preset-body-sm: 400 0.875rem/1.25rem Public Sans, sans-serif;
  --al-typography-preset-body-sm-letter-spacing: normal;
  --al-typography-preset-body-sm-medium: 500 0.875rem/1.25rem Public Sans, sans-serif;
  --al-typography-preset-body-sm-medium-letter-spacing: normal;
  --al-typography-preset-body-sm-semibold: 600 0.875rem/1.25rem Public Sans, sans-serif;
  --al-typography-preset-body-sm-semibold-letter-spacing: 0.01em;
  --al-typography-preset-body-sm-bold: 700 0.875rem/1.25rem Public Sans, sans-serif;
  --al-typography-preset-body-sm-bold-letter-spacing: 0.01em;
  --al-typography-preset-body-md: 400 1rem/1.5rem Public Sans, sans-serif;
  --al-typography-preset-body-md-letter-spacing: normal;
  --al-typography-preset-body-md-medium: 500 1rem/1.5rem Public Sans, sans-serif;
  --al-typography-preset-body-md-medium-letter-spacing: normal;
  --al-typography-preset-body-md-semibold: 600 1rem/1.5rem Public Sans, sans-serif;
  --al-typography-preset-body-md-semibold-letter-spacing: 0.01em;
  --al-typography-preset-body-md-bold: 700 1rem/1.5rem Public Sans, sans-serif;
  --al-typography-preset-body-md-bold-letter-spacing: 0.01em;
  --al-typography-preset-body-lg: 400 1.25rem/1.75rem Public Sans, sans-serif;
  --al-typography-preset-body-lg-letter-spacing: normal;
  --al-typography-preset-body-lg-medium: 500 1.25rem/1.75rem Public Sans, sans-serif;
  --al-typography-preset-body-lg-medium-letter-spacing: normal;
  --al-typography-preset-body-lg-semibold: 600 1.25rem/1.75rem Public Sans, sans-serif;
  --al-typography-preset-body-lg-semibold-letter-spacing: 0.01em;
  --al-typography-preset-body-lg-bold: 700 1.25rem/1.75rem Public Sans, sans-serif;
  --al-typography-preset-body-lg-bold-letter-spacing: 0.01em;
  --al-typography-preset-heading-sm: 400 1.25rem/1.75rem Public Sans, sans-serif;
  --al-typography-preset-heading-sm-letter-spacing: normal;
  --al-typography-preset-heading-sm-medium: 500 1.25rem/1.75rem Public Sans, sans-serif;
  --al-typography-preset-heading-sm-medium-letter-spacing: normal;
  --al-typography-preset-heading-sm-semibold: 600 1.25rem/1.75rem Public Sans, sans-serif;
  --al-typography-preset-heading-sm-semibold-letter-spacing: 0.01em;
  --al-typography-preset-heading-sm-bold: 700 1.25rem/1.75rem Public Sans, sans-serif;
  --al-typography-preset-heading-sm-bold-letter-spacing: 0.01em;
  --al-typography-preset-heading-md: 400 1.5rem/2rem Public Sans, sans-serif;
  --al-typography-preset-heading-md-letter-spacing: normal;
  --al-typography-preset-heading-md-medium: 500 1.5rem/2rem Public Sans, sans-serif;
  --al-typography-preset-heading-md-medium-letter-spacing: normal;
  --al-typography-preset-heading-md-semibold: 600 1.5rem/2rem Public Sans, sans-serif;
  --al-typography-preset-heading-md-semibold-letter-spacing: 0.01em;
  --al-typography-preset-heading-md-bold: 700 1.5rem/2rem Public Sans, sans-serif;
  --al-typography-preset-heading-md-bold-letter-spacing: 0.01em;
  --al-typography-preset-heading-lg: 400 1.75rem/2.25rem Public Sans, sans-serif;
  --al-typography-preset-heading-lg-letter-spacing: normal;
  --al-typography-preset-heading-lg-medium: 500 1.75rem/2.25rem Public Sans, sans-serif;
  --al-typography-preset-heading-lg-medium-letter-spacing: normal;
  --al-typography-preset-heading-lg-semibold: 600 1.75rem/2.25rem Public Sans, sans-serif;
  --al-typography-preset-heading-lg-semibold-letter-spacing: 0.01em;
  --al-typography-preset-heading-lg-bold: 700 1.75rem/2.25rem Public Sans, sans-serif;
  --al-typography-preset-heading-lg-bold-letter-spacing: 0.01em;
  --al-typography-preset-display-sm: 400 2rem/2.5rem Public Sans, sans-serif;
  --al-typography-preset-display-sm-letter-spacing: normal;
  --al-typography-preset-display-sm-medium: 500 2rem/2.5rem Public Sans, sans-serif;
  --al-typography-preset-display-sm-medium-letter-spacing: normal;
  --al-typography-preset-display-sm-semibold: 600 2rem/2.5rem Public Sans, sans-serif;
  --al-typography-preset-display-sm-semibold-letter-spacing: 0.01em;
  --al-typography-preset-display-sm-bold: 700 2rem/2.5rem Public Sans, sans-serif;
  --al-typography-preset-display-sm-bold-letter-spacing: 0.01em;
  --al-typography-preset-display-md: 400 2.25rem/2.75rem Public Sans, sans-serif;
  --al-typography-preset-display-md-letter-spacing: normal;
  --al-typography-preset-display-md-medium: 500 2.25rem/2.75rem Public Sans, sans-serif;
  --al-typography-preset-display-md-medium-letter-spacing: normal;
  --al-typography-preset-display-md-semibold: 600 2.25rem/2.75rem Public Sans, sans-serif;
  --al-typography-preset-display-md-semibold-letter-spacing: 0.01em;
  --al-typography-preset-display-md-bold: 700 2.25rem/2.75rem Public Sans, sans-serif;
  --al-typography-preset-display-md-bold-letter-spacing: 0.01em;
  --al-typography-preset-display-lg: 400 3rem/3.25rem Public Sans, sans-serif;
  --al-typography-preset-display-lg-letter-spacing: normal;
  --al-typography-preset-display-lg-medium: 500 3rem/3.25rem Public Sans, sans-serif;
  --al-typography-preset-display-lg-medium-letter-spacing: normal;
  --al-typography-preset-display-lg-semibold: 600 3rem/3.25rem Public Sans, sans-serif;
  --al-typography-preset-display-lg-semibold-letter-spacing: 0.01em;
  --al-typography-preset-display-lg-bold: 700 3rem/3.25rem Public Sans, sans-serif;
  --al-typography-preset-display-lg-bold-letter-spacing: 0.01em;
  --al-z-index-0: 0;
  --al-z-index-100: 100;
  --al-z-index-200: 200;
  --al-z-index-300: 300;
  --al-z-index-400: 400;
  --al-z-index-500: 500;
  --al-z-index-top: 99999;
  --al-z-index-bottom: -100;
  --al-theme-animation-duration: var(--al-animation-duration-2);
  --al-theme-animation-duration-long: var(--al-animation-duration-4);
  --al-theme-animation-timing: var(--al-animation-timing-cubic-bezier);
  --al-theme-border-width: var(--al-border-width-1);
  --al-theme-border-width-md: var(--al-border-width-2);
  --al-theme-border-width-lg: var(--al-border-width-4);
  --al-theme-border-radius-xs: var(--al-border-radius-4);
  --al-theme-border-radius-sm: var(--al-border-radius-4);
  --al-theme-border-radius: var(--al-border-radius-6);
  --al-theme-border-radius-md: var(--al-border-radius-8);
  --al-theme-border-radius-lg: var(--al-border-radius-12);
  --al-theme-border-radius-round: var(--al-border-radius-round);
  --al-theme-border-radius-pill: var(--al-border-radius-pill);
  --al-theme-icon-xs: 8px;
  --al-theme-icon-sm: 12px;
  --al-theme-icon: 16px;
  --al-theme-icon-md: 20px;
  --al-theme-icon-lg: 24px;
  --al-theme-icon-xl: 32px;
  --al-theme-icon-xxl: 36px;
  --al-theme-icon-xxxl: 40px;
  --al-theme-layout-max-width-xs: 320px;
  --al-theme-layout-max-width-sm: 600px;
  --al-theme-layout-max-width-prose: 720px;
  --al-theme-layout-max-width-md: 800px;
  --al-theme-layout-max-width-lg: 1000px;
  --al-theme-layout-max-width: 1260px;
  --al-theme-layout-max-width-xl: 1360px;
  --al-theme-layout-max-width-xxl: 1440px;
  --al-theme-layout-height-header: 80px;
  --al-theme-opacity-disabled: var(--al-opacity-40);
  --al-theme-box-shadow-xs: var(--al-box-shadow-raised);
  --al-theme-box-shadow-sm: var(--al-box-shadow-raised);
  --al-theme-box-shadow: var(--al-box-shadow-raised);
  --al-theme-box-shadow-md: var(--al-box-shadow-overlay);
  --al-theme-box-shadow-lg: var(--al-box-shadow-overlay-lg);
  --al-theme-box-shadow-xl: var(--al-box-shadow-overlay-xl);
  --al-theme-space-xxxs: 0.125rem;
  --al-theme-space-xxs: 0.25rem;
  --al-theme-space-xs: 0.5rem;
  --al-theme-space-sm: 0.75rem;
  --al-theme-space: 1rem;
  --al-theme-space-md: 1.25rem;
  --al-theme-space-lg: 1.5rem;
  --al-theme-space-xl: 1.75rem;
  --al-theme-space-xxl: 2rem;
  --al-theme-space-xxxl: 2.25rem;
  --al-theme-space-super: 4rem;
  --al-theme-size-control-sm: 32px;
  --al-theme-size-control: 40px;
  --al-theme-size-control-lg: 48px;
  --al-theme-typography-body-xs: var(--al-typography-preset-body-xs);
  --al-theme-typography-body-xs-letter-spacing: var(--al-typography-preset-body-xs-letter-spacing);
  --al-theme-typography-body-xs-medium: var(--al-typography-preset-body-xs-medium);
  --al-theme-typography-body-xs-medium-letter-spacing: var(--al-typography-preset-body-xs-medium-letter-spacing);
  --al-theme-typography-body-xs-semibold: var(--al-typography-preset-body-xs-semibold);
  --al-theme-typography-body-xs-semibold-letter-spacing: var(--al-typography-preset-body-xs-semibold-letter-spacing);
  --al-theme-typography-body-xs-bold: var(--al-typography-preset-body-xs-bold);
  --al-theme-typography-body-xs-bold-letter-spacing: var(--al-typography-preset-body-xs-bold-letter-spacing);
  --al-theme-typography-body-sm: var(--al-typography-preset-body-sm);
  --al-theme-typography-body-sm-letter-spacing: var(--al-typography-preset-body-sm-letter-spacing);
  --al-theme-typography-body-sm-medium: var(--al-typography-preset-body-sm-medium);
  --al-theme-typography-body-sm-medium-letter-spacing: var(--al-typography-preset-body-sm-medium-letter-spacing);
  --al-theme-typography-body-sm-semibold: var(--al-typography-preset-body-sm-semibold);
  --al-theme-typography-body-sm-semibold-letter-spacing: var(--al-typography-preset-body-sm-semibold-letter-spacing);
  --al-theme-typography-body-sm-bold: var(--al-typography-preset-body-sm-bold);
  --al-theme-typography-body-sm-bold-letter-spacing: var(--al-typography-preset-body-sm-bold-letter-spacing);
  --al-theme-typography-body-md: var(--al-typography-preset-body-md);
  --al-theme-typography-body-md-letter-spacing: var(--al-typography-preset-body-md-letter-spacing);
  --al-theme-typography-body-md-medium: var(--al-typography-preset-body-md-medium);
  --al-theme-typography-body-md-medium-letter-spacing: var(--al-typography-preset-body-md-medium-letter-spacing);
  --al-theme-typography-body-md-semibold: var(--al-typography-preset-body-md-semibold);
  --al-theme-typography-body-md-semibold-letter-spacing: var(--al-typography-preset-body-md-semibold-letter-spacing);
  --al-theme-typography-body-md-bold: var(--al-typography-preset-body-md-bold);
  --al-theme-typography-body-md-bold-letter-spacing: var(--al-typography-preset-body-md-bold-letter-spacing);
  --al-theme-typography-body-lg: var(--al-typography-preset-body-lg);
  --al-theme-typography-body-lg-letter-spacing: var(--al-typography-preset-body-lg-letter-spacing);
  --al-theme-typography-body-lg-medium: var(--al-typography-preset-body-lg-medium);
  --al-theme-typography-body-lg-medium-letter-spacing: var(--al-typography-preset-body-lg-medium-letter-spacing);
  --al-theme-typography-body-lg-semibold: var(--al-typography-preset-body-lg-semibold);
  --al-theme-typography-body-lg-semibold-letter-spacing: var(--al-typography-preset-body-lg-semibold-letter-spacing);
  --al-theme-typography-body-lg-bold: var(--al-typography-preset-body-lg-bold);
  --al-theme-typography-body-lg-bold-letter-spacing: var(--al-typography-preset-body-lg-bold-letter-spacing);
  --al-theme-typography-heading-sm: var(--al-typography-preset-heading-sm);
  --al-theme-typography-heading-sm-letter-spacing: var(--al-typography-preset-heading-sm-letter-spacing);
  --al-theme-typography-heading-sm-medium: var(--al-typography-preset-heading-sm-medium);
  --al-theme-typography-heading-sm-medium-letter-spacing: var(--al-typography-preset-heading-sm-medium-letter-spacing);
  --al-theme-typography-heading-sm-semibold: var(--al-typography-preset-heading-sm-semibold);
  --al-theme-typography-heading-sm-semibold-letter-spacing: var(--al-typography-preset-heading-sm-semibold-letter-spacing);
  --al-theme-typography-heading-sm-bold: var(--al-typography-preset-heading-sm-bold);
  --al-theme-typography-heading-sm-bold-letter-spacing: var(--al-typography-preset-heading-sm-bold-letter-spacing);
  --al-theme-typography-heading-md: var(--al-typography-preset-heading-md);
  --al-theme-typography-heading-md-letter-spacing: var(--al-typography-preset-heading-md-letter-spacing);
  --al-theme-typography-heading-md-medium: var(--al-typography-preset-heading-md-medium);
  --al-theme-typography-heading-md-medium-letter-spacing: var(--al-typography-preset-heading-md-medium-letter-spacing);
  --al-theme-typography-heading-md-semibold: var(--al-typography-preset-heading-md-semibold);
  --al-theme-typography-heading-md-semibold-letter-spacing: var(--al-typography-preset-heading-md-semibold-letter-spacing);
  --al-theme-typography-heading-md-bold: var(--al-typography-preset-heading-md-bold);
  --al-theme-typography-heading-md-bold-letter-spacing: var(--al-typography-preset-heading-md-bold-letter-spacing);
  --al-theme-typography-heading-lg: var(--al-typography-preset-heading-lg);
  --al-theme-typography-heading-lg-letter-spacing: var(--al-typography-preset-heading-lg-letter-spacing);
  --al-theme-typography-heading-lg-medium: var(--al-typography-preset-heading-lg-medium);
  --al-theme-typography-heading-lg-medium-letter-spacing: var(--al-typography-preset-heading-lg-medium-letter-spacing);
  --al-theme-typography-heading-lg-semibold: var(--al-typography-preset-heading-lg-semibold);
  --al-theme-typography-heading-lg-semibold-letter-spacing: var(--al-typography-preset-heading-lg-semibold-letter-spacing);
  --al-theme-typography-heading-lg-bold: var(--al-typography-preset-heading-lg-bold);
  --al-theme-typography-heading-lg-bold-letter-spacing: var(--al-typography-preset-heading-lg-bold-letter-spacing);
  --al-theme-typography-display-sm: var(--al-typography-preset-display-sm);
  --al-theme-typography-display-sm-letter-spacing: var(--al-typography-preset-display-sm-letter-spacing);
  --al-theme-typography-display-sm-medium: var(--al-typography-preset-display-sm-medium);
  --al-theme-typography-display-sm-medium-letter-spacing: var(--al-typography-preset-display-sm-medium-letter-spacing);
  --al-theme-typography-display-sm-semibold: var(--al-typography-preset-display-sm-semibold);
  --al-theme-typography-display-sm-semibold-letter-spacing: var(--al-typography-preset-display-sm-semibold-letter-spacing);
  --al-theme-typography-display-sm-bold: var(--al-typography-preset-display-sm-bold);
  --al-theme-typography-display-sm-bold-letter-spacing: var(--al-typography-preset-display-sm-bold-letter-spacing);
  --al-theme-typography-display-md: var(--al-typography-preset-display-md);
  --al-theme-typography-display-md-letter-spacing: var(--al-typography-preset-display-md-letter-spacing);
  --al-theme-typography-display-md-medium: var(--al-typography-preset-display-md-medium);
  --al-theme-typography-display-md-medium-letter-spacing: var(--al-typography-preset-display-md-medium-letter-spacing);
  --al-theme-typography-display-md-semibold: var(--al-typography-preset-display-md-semibold);
  --al-theme-typography-display-md-semibold-letter-spacing: var(--al-typography-preset-display-md-semibold-letter-spacing);
  --al-theme-typography-display-md-bold: var(--al-typography-preset-display-md-bold);
  --al-theme-typography-display-md-bold-letter-spacing: var(--al-typography-preset-display-md-bold-letter-spacing);
  --al-theme-typography-display-lg: var(--al-typography-preset-display-lg);
  --al-theme-typography-display-lg-letter-spacing: var(--al-typography-preset-display-lg-letter-spacing);
  --al-theme-typography-display-lg-medium: var(--al-typography-preset-display-lg-medium);
  --al-theme-typography-display-lg-medium-letter-spacing: var(--al-typography-preset-display-lg-medium-letter-spacing);
  --al-theme-typography-display-lg-semibold: var(--al-typography-preset-display-lg-semibold);
  --al-theme-typography-display-lg-semibold-letter-spacing: var(--al-typography-preset-display-lg-semibold-letter-spacing);
  --al-theme-typography-display-lg-bold: var(--al-typography-preset-display-lg-bold);
  --al-theme-typography-display-lg-bold-letter-spacing: var(--al-typography-preset-display-lg-bold-letter-spacing);
  --al-theme-color-background-neutral-weak: var(--al-color-neutral-900);
  --al-theme-color-background-neutral-default: var(--al-color-neutral-800);
  --al-theme-color-background-neutral-strong: var(--al-color-neutral-700);
  --al-theme-color-background-neutral-bold: var(--al-color-neutral-600);
  --al-theme-color-background-primary-faint: var(--al-color-primary-800);
  --al-theme-color-background-primary-weak: var(--al-color-primary-700);
  --al-theme-color-background-primary-default: var(--al-color-primary-400);
  --al-theme-color-background-primary-strong: var(--al-color-primary-400);
  --al-theme-color-background-primary-bold: var(--al-color-primary-200);
  --al-theme-color-background-secondary-faint: var(--al-color-neutral-700);
  --al-theme-color-background-secondary-weak: var(--al-color-neutral-600);
  --al-theme-color-background-secondary-default: var(--al-color-neutral-200);
  --al-theme-color-background-secondary-strong: var(--al-color-neutral-400);
  --al-theme-color-background-secondary-bold: var(--al-color-neutral-500);
  --al-theme-color-background-tertiary-faint: var(--al-color-tertiary-800);
  --al-theme-color-background-tertiary-weak: var(--al-color-tertiary-700);
  --al-theme-color-background-tertiary-default: var(--al-color-tertiary-400);
  --al-theme-color-background-tertiary-strong: var(--al-color-tertiary-300);
  --al-theme-color-background-tertiary-bold: var(--al-color-tertiary-200);
  --al-theme-color-background-info-faint: var(--al-color-primary-800);
  --al-theme-color-background-info-weak: var(--al-color-primary-800);
  --al-theme-color-background-info-default: var(--al-color-primary-400);
  --al-theme-color-background-info-strong: var(--al-color-primary-300);
  --al-theme-color-background-info-bold: var(--al-color-primary-200);
  --al-theme-color-background-success-faint: var(--al-color-success-800);
  --al-theme-color-background-success-weak: var(--al-color-success-900);
  --al-theme-color-background-success-default: var(--al-color-success-400);
  --al-theme-color-background-success-strong: var(--al-color-success-300);
  --al-theme-color-background-success-bold: var(--al-color-success-200);
  --al-theme-color-background-warning-faint: var(--al-color-warning-800);
  --al-theme-color-background-warning-weak: var(--al-color-warning-900);
  --al-theme-color-background-warning-default: var(--al-color-warning-400);
  --al-theme-color-background-warning-strong: var(--al-color-warning-300);
  --al-theme-color-background-warning-bold: var(--al-color-warning-200);
  --al-theme-color-background-danger-faint: var(--al-color-danger-800);
  --al-theme-color-background-danger-weak: var(--al-color-danger-900);
  --al-theme-color-background-danger-default: var(--al-color-danger-400);
  --al-theme-color-background-danger-strong: var(--al-color-danger-300);
  --al-theme-color-background-danger-bold: var(--al-color-danger-200);
  --al-theme-color-background-inverse-default: var(--al-color-neutral-100);
  --al-theme-color-background-inverse-strong: var(--al-color-neutral-100);
  --al-theme-color-background-transparent-weak: var(--al-color-neutral-alpha-100-10);
  --al-theme-color-background-transparent-default: var(--al-color-transparent-0);
  --al-theme-color-background-transparent-strong: var(--al-color-neutral-alpha-900-80);
  --al-theme-color-background-disabled-default: var(--al-color-neutral-700);
  --al-theme-color-content-neutral-weak: var(--al-color-neutral-400);
  --al-theme-color-content-neutral-default: var(--al-color-neutral-200);
  --al-theme-color-content-neutral-faint: var(--al-color-neutral-400);
  --al-theme-color-content-primary-faint: var(--al-color-primary-700);
  --al-theme-color-content-primary-weak: var(--al-color-primary-900);
  --al-theme-color-content-primary-default: var(--al-color-primary-300);
  --al-theme-color-content-primary-strong: var(--al-color-primary-400);
  --al-theme-color-content-primary-bold: var(--al-color-primary-200);
  --al-theme-color-content-secondary-faint: var(--al-color-neutral-700);
  --al-theme-color-content-secondary-weak: var(--al-color-neutral-800);
  --al-theme-color-content-secondary-default: var(--al-color-neutral-400);
  --al-theme-color-content-secondary-strong: var(--al-color-neutral-500);
  --al-theme-color-content-secondary-bold: var(--al-color-neutral-300);
  --al-theme-color-content-tertiary-faint: var(--al-color-tertiary-700);
  --al-theme-color-content-tertiary-weak: var(--al-color-tertiary-800);
  --al-theme-color-content-tertiary-default: var(--al-color-tertiary-300);
  --al-theme-color-content-tertiary-strong: var(--al-color-tertiary-400);
  --al-theme-color-content-tertiary-bold: var(--al-color-tertiary-200);
  --al-theme-color-content-info-faint: var(--al-color-primary-700);
  --al-theme-color-content-info-weak: var(--al-color-primary-900);
  --al-theme-color-content-info-default: var(--al-color-primary-300);
  --al-theme-color-content-info-strong: var(--al-color-primary-400);
  --al-theme-color-content-info-bold: var(--al-color-primary-200);
  --al-theme-color-content-success-faint: var(--al-color-success-700);
  --al-theme-color-content-success-weak: var(--al-color-neutral-800);
  --al-theme-color-content-success-default: var(--al-color-success-400);
  --al-theme-color-content-success-strong: var(--al-color-success-400);
  --al-theme-color-content-success-bold: var(--al-color-success-200);
  --al-theme-color-content-warning-faint: var(--al-color-warning-700);
  --al-theme-color-content-warning-weak: var(--al-color-neutral-800);
  --al-theme-color-content-warning-default: var(--al-color-warning-400);
  --al-theme-color-content-warning-strong: var(--al-color-warning-400);
  --al-theme-color-content-warning-bold: var(--al-color-warning-200);
  --al-theme-color-content-danger-faint: var(--al-color-danger-700);
  --al-theme-color-content-danger-weak: var(--al-color-neutral-800);
  --al-theme-color-content-danger-default: var(--al-color-danger-400);
  --al-theme-color-content-danger-strong: var(--al-color-danger-400);
  --al-theme-color-content-danger-bold: var(--al-color-danger-200);
  --al-theme-color-content-inverse-default: var(--al-color-neutral-800);
  --al-theme-color-content-inverse-strong: var(--al-color-neutral-800);
  --al-theme-color-content-disabled-default: var(--al-color-neutral-500);
  --al-theme-color-border-neutral-weak: var(--al-color-neutral-700);
  --al-theme-color-border-neutral-default: var(--al-color-neutral-700);
  --al-theme-color-border-neutral-strong: var(--al-color-neutral-500);
  --al-theme-color-border-primary-faint: var(--al-color-primary-900);
  --al-theme-color-border-primary-weak: var(--al-color-primary-alpha-500-30);
  --al-theme-color-border-primary-default: var(--al-color-primary-400);
  --al-theme-color-border-primary-strong: var(--al-color-primary-300);
  --al-theme-color-border-primary-bold: var(--al-color-primary-200);
  --al-theme-color-border-secondary-faint: var(--al-color-neutral-700);
  --al-theme-color-border-secondary-weak: var(--al-color-neutral-600);
  --al-theme-color-border-secondary-default: var(--al-color-neutral-400);
  --al-theme-color-border-secondary-strong: var(--al-color-neutral-300);
  --al-theme-color-border-secondary-bold: var(--al-color-neutral-200);
  --al-theme-color-border-tertiary-faint: var(--al-color-tertiary-900);
  --al-theme-color-border-tertiary-weak: var(--al-color-tertiary-800);
  --al-theme-color-border-tertiary-default: var(--al-color-tertiary-400);
  --al-theme-color-border-tertiary-strong: var(--al-color-tertiary-300);
  --al-theme-color-border-tertiary-bold: var(--al-color-tertiary-200);
  --al-theme-color-border-info-faint: var(--al-color-primary-900);
  --al-theme-color-border-info-weak: var(--al-color-primary-800);
  --al-theme-color-border-info-default: var(--al-color-primary-400);
  --al-theme-color-border-info-strong: var(--al-color-primary-300);
  --al-theme-color-border-info-bold: var(--al-color-primary-200);
  --al-theme-color-border-success-faint: var(--al-color-success-900);
  --al-theme-color-border-success-weak: var(--al-color-success-800);
  --al-theme-color-border-success-default: var(--al-color-success-400);
  --al-theme-color-border-success-strong: var(--al-color-success-300);
  --al-theme-color-border-success-bold: var(--al-color-success-200);
  --al-theme-color-border-warning-faint: var(--al-color-warning-900);
  --al-theme-color-border-warning-weak: var(--al-color-warning-800);
  --al-theme-color-border-warning-default: var(--al-color-warning-400);
  --al-theme-color-border-warning-strong: var(--al-color-warning-300);
  --al-theme-color-border-warning-bold: var(--al-color-warning-200);
  --al-theme-color-border-danger-faint: var(--al-color-danger-900);
  --al-theme-color-border-danger-weak: var(--al-color-danger-800);
  --al-theme-color-border-danger-default: var(--al-color-danger-400);
  --al-theme-color-border-danger-strong: var(--al-color-danger-300);
  --al-theme-color-border-danger-bold: var(--al-color-danger-200);
  --al-theme-color-border-inverse-default: var(--al-color-neutral-700);
  --al-theme-color-border-disabled-default: var(--al-color-neutral-700);
  --al-theme-color-shadow-default: var(--al-theme-color-shadow-dark);
  --al-theme-color-shadow-dark: var(--al-color-neutral-alpha-900-60);
  --al-theme-color-shadow-light: var(--al-color-neutral-alpha-300-30);
  --al-theme-color-shadow-neutral: var(--al-color-neutral-alpha-100-30);
  --al-theme-color-shadow-primary: var(--al-color-primary-alpha-100-30);
  --al-theme-color-shadow-secondary: var(--al-color-secondary-alpha-100-30);
  --al-theme-color-shadow-tertiary: var(--al-color-tertiary-alpha-100-30);
  --al-theme-color-inverse-100: var(--al-color-neutral-100);
  --al-theme-color-inverse-200: var(--al-color-neutral-200);
  --al-theme-color-inverse-300: var(--al-color-neutral-300);
  --al-theme-color-inverse-400: var(--al-color-neutral-400);
  --al-theme-color-inverse-500: var(--al-color-neutral-500);
  --al-theme-color-inverse-600: var(--al-color-neutral-600);
  --al-theme-color-inverse-700: var(--al-color-neutral-700);
  --al-theme-color-inverse-800: var(--al-color-neutral-800);
  --al-theme-color-inverse-900: var(--al-color-neutral-900);
  --al-theme-color-header-background: var(--al-theme-color-background-neutral-default);
  --al-theme-color-body-background: var(--al-theme-color-background-neutral-weak);
  --al-theme-color-focus-ring: var(--al-theme-color-border-primary-default);
}

/* ------------------------------------ *\
  $BASE
\* ------------------------------------ */
/**
 * RTL support for values logical properties can't automatically adjust for
 * 1. Percentage based horizontal translate values need to be flipped
 * 2. Background gradients using "to right" or "to left" need to be toggleed to using deg values
 * 3. Background Position From is used for reversing animation from right to left at 0%
 * 4. Background Position To is used for reversing animation from right to left at 100%
 */
[dir=rtl] {
  --rtlTranslateX: 50%; /* 1 */
  --rtlGradientToRight: 270deg; /* 2 */
  --rtlBackgroundPositionFrom: -135%; /* 3 */
  --rtlBackgroundPositionTo: 0%; /* 4 */
}

html {
  /*
   * Was `var(--al-base-font)`, which resolved to 16px. That primitive is gone —
   * Figma has no counterpart and the value is the rem basis, not a design
   * choice anything restates. Behaviour is byte-identical.
   */
  font-size: 16px;
}

body {
  display: flex;
  flex-direction: column;
  color: var(--al-theme-color-content-neutral-default);
  background: var(--al-theme-color-body-background);
  font: var(--al-theme-typography-body-md);
}

strong {
  font-weight: var(--al-font-weight-bold);
}

:focus-visible {
  outline: var(--al-theme-border-width-md) solid var(--al-theme-color-focus-ring);
  outline-offset: var(--al-focus-outline-offset, var(--al-theme-border-width-md));
}

/* ------------------------------------*\
  #UTILITIES
\*------------------------------------ */
/* ------------------------------------ *\
  $SPACING UTILITIES
\* ------------------------------------ */
.al-u-gap {
  display: flex;
  flex-direction: column;
  gap: var(--al-theme-space);
}

.al-u-gap-xxxs {
  display: flex;
  flex-direction: column;
  gap: var(--al-theme-space-xxxs);
}

.al-u-gap-xxs {
  display: flex;
  flex-direction: column;
  gap: var(--al-theme-space-xxs);
}

.al-u-gap-xs {
  display: flex;
  flex-direction: column;
  gap: var(--al-theme-space-xs);
}

.al-u-gap-sm {
  display: flex;
  flex-direction: column;
  gap: var(--al-theme-space-sm);
}

.al-u-gap-md {
  display: flex;
  flex-direction: column;
  gap: var(--al-theme-space-md);
}

.al-u-gap-lg {
  display: flex;
  flex-direction: column;
  gap: var(--al-theme-space-lg);
}

.al-u-gap-xl {
  display: flex;
  flex-direction: column;
  gap: var(--al-theme-space-xl);
}

.al-u-gap-xxl {
  display: flex;
  flex-direction: column;
  gap: var(--al-theme-space-xxl);
}

.al-u-gap-xxxl {
  display: flex;
  flex-direction: column;
  gap: var(--al-theme-space-xxxl);
}

.al-u-gap-super {
  display: flex;
  flex-direction: column;
  gap: var(--al-theme-space-super);
}

.al-u-gap-none {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.al-u-gap--row {
  align-items: center;
  flex-direction: row;
}

/* ------------------------------------ *\
  $GRID UTILITIES
\* ------------------------------------ */
/**
 * Grid variables
 */
/**
 * Grid column generator mixin
 */
/**
 * Grid column generator default
 */
/**
 * Grid implicit column
 */
.al-u-grid.cols\:1\@ {
  grid-template-columns: repeat(12, 1fr);
}

/**
 * Grid explicit column
 * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
 *   an `<al-layout variant="grid">` shadow root, in which case no
 *   `.al-u-grid` ancestor exists in the light DOM for these items to match
 *   against. Dropping the ancestor makes the same span classes work in both
 *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
 * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
 *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
 *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
 *   so at equal specificity a later `i` in the loop (say `col:12`) would
 *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
 *   The doubled class restores the old cascade without an ancestor.
 */
.al-u-grid__item.col\:1,
.al-u-grid__item.col\:1\@.col\:1\@ {
  grid-column: span 1/span 1;
}

/**
 * Grid explicit row
 */
.al-u-grid__item.row\:1,
.al-u-grid__item.row\:1\@.row\:1\@ {
  grid-row: span 1/span 1;
}

/**
 * Grid offset
 */
.offset\:1\@ {
  grid-column-start: 1 !important;
}

/**
 * Grid implicit column
 */
.al-u-grid.cols\:2\@ {
  grid-template-columns: repeat(6, 1fr);
}

/**
 * Grid explicit column
 * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
 *   an `<al-layout variant="grid">` shadow root, in which case no
 *   `.al-u-grid` ancestor exists in the light DOM for these items to match
 *   against. Dropping the ancestor makes the same span classes work in both
 *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
 * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
 *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
 *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
 *   so at equal specificity a later `i` in the loop (say `col:12`) would
 *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
 *   The doubled class restores the old cascade without an ancestor.
 */
.al-u-grid__item.col\:2,
.al-u-grid__item.col\:2\@.col\:2\@ {
  grid-column: span 2/span 2;
}

/**
 * Grid explicit row
 */
.al-u-grid__item.row\:2,
.al-u-grid__item.row\:2\@.row\:2\@ {
  grid-row: span 2/span 2;
}

/**
 * Grid offset
 */
.offset\:2\@ {
  grid-column-start: 2 !important;
}

/**
 * Grid implicit column
 */
.al-u-grid.cols\:3\@ {
  grid-template-columns: repeat(4, 1fr);
}

/**
 * Grid explicit column
 * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
 *   an `<al-layout variant="grid">` shadow root, in which case no
 *   `.al-u-grid` ancestor exists in the light DOM for these items to match
 *   against. Dropping the ancestor makes the same span classes work in both
 *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
 * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
 *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
 *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
 *   so at equal specificity a later `i` in the loop (say `col:12`) would
 *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
 *   The doubled class restores the old cascade without an ancestor.
 */
.al-u-grid__item.col\:3,
.al-u-grid__item.col\:3\@.col\:3\@ {
  grid-column: span 3/span 3;
}

/**
 * Grid explicit row
 */
.al-u-grid__item.row\:3,
.al-u-grid__item.row\:3\@.row\:3\@ {
  grid-row: span 3/span 3;
}

/**
 * Grid offset
 */
.offset\:3\@ {
  grid-column-start: 3 !important;
}

/**
 * Grid implicit column
 */
.al-u-grid.cols\:4\@ {
  grid-template-columns: repeat(3, 1fr);
}

/**
 * Grid explicit column
 * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
 *   an `<al-layout variant="grid">` shadow root, in which case no
 *   `.al-u-grid` ancestor exists in the light DOM for these items to match
 *   against. Dropping the ancestor makes the same span classes work in both
 *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
 * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
 *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
 *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
 *   so at equal specificity a later `i` in the loop (say `col:12`) would
 *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
 *   The doubled class restores the old cascade without an ancestor.
 */
.al-u-grid__item.col\:4,
.al-u-grid__item.col\:4\@.col\:4\@ {
  grid-column: span 4/span 4;
}

/**
 * Grid explicit row
 */
.al-u-grid__item.row\:4,
.al-u-grid__item.row\:4\@.row\:4\@ {
  grid-row: span 4/span 4;
}

/**
 * Grid offset
 */
.offset\:4\@ {
  grid-column-start: 4 !important;
}

/**
 * Grid implicit column
 */
.al-u-grid.cols\:5\@ {
  grid-template-columns: repeat(2.4, 1fr);
}

/**
 * Grid explicit column
 * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
 *   an `<al-layout variant="grid">` shadow root, in which case no
 *   `.al-u-grid` ancestor exists in the light DOM for these items to match
 *   against. Dropping the ancestor makes the same span classes work in both
 *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
 * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
 *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
 *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
 *   so at equal specificity a later `i` in the loop (say `col:12`) would
 *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
 *   The doubled class restores the old cascade without an ancestor.
 */
.al-u-grid__item.col\:5,
.al-u-grid__item.col\:5\@.col\:5\@ {
  grid-column: span 5/span 5;
}

/**
 * Grid explicit row
 */
.al-u-grid__item.row\:5,
.al-u-grid__item.row\:5\@.row\:5\@ {
  grid-row: span 5/span 5;
}

/**
 * Grid offset
 */
.offset\:5\@ {
  grid-column-start: 5 !important;
}

/**
 * Grid implicit column
 */
.al-u-grid.cols\:6\@ {
  grid-template-columns: repeat(2, 1fr);
}

/**
 * Grid explicit column
 * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
 *   an `<al-layout variant="grid">` shadow root, in which case no
 *   `.al-u-grid` ancestor exists in the light DOM for these items to match
 *   against. Dropping the ancestor makes the same span classes work in both
 *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
 * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
 *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
 *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
 *   so at equal specificity a later `i` in the loop (say `col:12`) would
 *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
 *   The doubled class restores the old cascade without an ancestor.
 */
.al-u-grid__item.col\:6,
.al-u-grid__item.col\:6\@.col\:6\@ {
  grid-column: span 6/span 6;
}

/**
 * Grid explicit row
 */
.al-u-grid__item.row\:6,
.al-u-grid__item.row\:6\@.row\:6\@ {
  grid-row: span 6/span 6;
}

/**
 * Grid offset
 */
.offset\:6\@ {
  grid-column-start: 6 !important;
}

/**
 * Grid implicit column
 */
.al-u-grid.cols\:7\@ {
  grid-template-columns: repeat(1.7142857143, 1fr);
}

/**
 * Grid explicit column
 * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
 *   an `<al-layout variant="grid">` shadow root, in which case no
 *   `.al-u-grid` ancestor exists in the light DOM for these items to match
 *   against. Dropping the ancestor makes the same span classes work in both
 *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
 * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
 *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
 *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
 *   so at equal specificity a later `i` in the loop (say `col:12`) would
 *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
 *   The doubled class restores the old cascade without an ancestor.
 */
.al-u-grid__item.col\:7,
.al-u-grid__item.col\:7\@.col\:7\@ {
  grid-column: span 7/span 7;
}

/**
 * Grid explicit row
 */
.al-u-grid__item.row\:7,
.al-u-grid__item.row\:7\@.row\:7\@ {
  grid-row: span 7/span 7;
}

/**
 * Grid offset
 */
.offset\:7\@ {
  grid-column-start: 7 !important;
}

/**
 * Grid implicit column
 */
.al-u-grid.cols\:8\@ {
  grid-template-columns: repeat(1.5, 1fr);
}

/**
 * Grid explicit column
 * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
 *   an `<al-layout variant="grid">` shadow root, in which case no
 *   `.al-u-grid` ancestor exists in the light DOM for these items to match
 *   against. Dropping the ancestor makes the same span classes work in both
 *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
 * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
 *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
 *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
 *   so at equal specificity a later `i` in the loop (say `col:12`) would
 *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
 *   The doubled class restores the old cascade without an ancestor.
 */
.al-u-grid__item.col\:8,
.al-u-grid__item.col\:8\@.col\:8\@ {
  grid-column: span 8/span 8;
}

/**
 * Grid explicit row
 */
.al-u-grid__item.row\:8,
.al-u-grid__item.row\:8\@.row\:8\@ {
  grid-row: span 8/span 8;
}

/**
 * Grid offset
 */
.offset\:8\@ {
  grid-column-start: 8 !important;
}

/**
 * Grid implicit column
 */
.al-u-grid.cols\:9\@ {
  grid-template-columns: repeat(1.3333333333, 1fr);
}

/**
 * Grid explicit column
 * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
 *   an `<al-layout variant="grid">` shadow root, in which case no
 *   `.al-u-grid` ancestor exists in the light DOM for these items to match
 *   against. Dropping the ancestor makes the same span classes work in both
 *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
 * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
 *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
 *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
 *   so at equal specificity a later `i` in the loop (say `col:12`) would
 *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
 *   The doubled class restores the old cascade without an ancestor.
 */
.al-u-grid__item.col\:9,
.al-u-grid__item.col\:9\@.col\:9\@ {
  grid-column: span 9/span 9;
}

/**
 * Grid explicit row
 */
.al-u-grid__item.row\:9,
.al-u-grid__item.row\:9\@.row\:9\@ {
  grid-row: span 9/span 9;
}

/**
 * Grid offset
 */
.offset\:9\@ {
  grid-column-start: 9 !important;
}

/**
 * Grid implicit column
 */
.al-u-grid.cols\:10\@ {
  grid-template-columns: repeat(1.2, 1fr);
}

/**
 * Grid explicit column
 * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
 *   an `<al-layout variant="grid">` shadow root, in which case no
 *   `.al-u-grid` ancestor exists in the light DOM for these items to match
 *   against. Dropping the ancestor makes the same span classes work in both
 *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
 * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
 *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
 *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
 *   so at equal specificity a later `i` in the loop (say `col:12`) would
 *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
 *   The doubled class restores the old cascade without an ancestor.
 */
.al-u-grid__item.col\:10,
.al-u-grid__item.col\:10\@.col\:10\@ {
  grid-column: span 10/span 10;
}

/**
 * Grid explicit row
 */
.al-u-grid__item.row\:10,
.al-u-grid__item.row\:10\@.row\:10\@ {
  grid-row: span 10/span 10;
}

/**
 * Grid offset
 */
.offset\:10\@ {
  grid-column-start: 10 !important;
}

/**
 * Grid implicit column
 */
.al-u-grid.cols\:11\@ {
  grid-template-columns: repeat(1.0909090909, 1fr);
}

/**
 * Grid explicit column
 * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
 *   an `<al-layout variant="grid">` shadow root, in which case no
 *   `.al-u-grid` ancestor exists in the light DOM for these items to match
 *   against. Dropping the ancestor makes the same span classes work in both
 *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
 * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
 *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
 *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
 *   so at equal specificity a later `i` in the loop (say `col:12`) would
 *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
 *   The doubled class restores the old cascade without an ancestor.
 */
.al-u-grid__item.col\:11,
.al-u-grid__item.col\:11\@.col\:11\@ {
  grid-column: span 11/span 11;
}

/**
 * Grid explicit row
 */
.al-u-grid__item.row\:11,
.al-u-grid__item.row\:11\@.row\:11\@ {
  grid-row: span 11/span 11;
}

/**
 * Grid offset
 */
.offset\:11\@ {
  grid-column-start: 11 !important;
}

/**
 * Grid implicit column
 */
.al-u-grid.cols\:12\@ {
  grid-template-columns: repeat(1, 1fr);
}

/**
 * Grid explicit column
 * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
 *   an `<al-layout variant="grid">` shadow root, in which case no
 *   `.al-u-grid` ancestor exists in the light DOM for these items to match
 *   against. Dropping the ancestor makes the same span classes work in both
 *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
 * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
 *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
 *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
 *   so at equal specificity a later `i` in the loop (say `col:12`) would
 *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
 *   The doubled class restores the old cascade without an ancestor.
 */
.al-u-grid__item.col\:12,
.al-u-grid__item.col\:12\@.col\:12\@ {
  grid-column: span 12/span 12;
}

/**
 * Grid explicit row
 */
.al-u-grid__item.row\:12,
.al-u-grid__item.row\:12\@.row\:12\@ {
  grid-row: span 12/span 12;
}

/**
 * Grid offset
 */
.offset\:12\@ {
  grid-column-start: 12 !important;
}

/**
 * Grid column generator for xs breakpoint
 */
@media (min-width: 320px) {
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:1\@xs {
    grid-template-columns: repeat(12, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:1,
  .al-u-grid__item.col\:1\@xs.col\:1\@xs {
    grid-column: span 1/span 1;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:1,
  .al-u-grid__item.row\:1\@xs.row\:1\@xs {
    grid-row: span 1/span 1;
  }
  /**
   * Grid offset
   */
  .offset\:1\@xs {
    grid-column-start: 1 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:2\@xs {
    grid-template-columns: repeat(6, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:2,
  .al-u-grid__item.col\:2\@xs.col\:2\@xs {
    grid-column: span 2/span 2;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:2,
  .al-u-grid__item.row\:2\@xs.row\:2\@xs {
    grid-row: span 2/span 2;
  }
  /**
   * Grid offset
   */
  .offset\:2\@xs {
    grid-column-start: 2 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:3\@xs {
    grid-template-columns: repeat(4, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:3,
  .al-u-grid__item.col\:3\@xs.col\:3\@xs {
    grid-column: span 3/span 3;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:3,
  .al-u-grid__item.row\:3\@xs.row\:3\@xs {
    grid-row: span 3/span 3;
  }
  /**
   * Grid offset
   */
  .offset\:3\@xs {
    grid-column-start: 3 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:4\@xs {
    grid-template-columns: repeat(3, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:4,
  .al-u-grid__item.col\:4\@xs.col\:4\@xs {
    grid-column: span 4/span 4;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:4,
  .al-u-grid__item.row\:4\@xs.row\:4\@xs {
    grid-row: span 4/span 4;
  }
  /**
   * Grid offset
   */
  .offset\:4\@xs {
    grid-column-start: 4 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:5\@xs {
    grid-template-columns: repeat(2.4, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:5,
  .al-u-grid__item.col\:5\@xs.col\:5\@xs {
    grid-column: span 5/span 5;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:5,
  .al-u-grid__item.row\:5\@xs.row\:5\@xs {
    grid-row: span 5/span 5;
  }
  /**
   * Grid offset
   */
  .offset\:5\@xs {
    grid-column-start: 5 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:6\@xs {
    grid-template-columns: repeat(2, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:6,
  .al-u-grid__item.col\:6\@xs.col\:6\@xs {
    grid-column: span 6/span 6;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:6,
  .al-u-grid__item.row\:6\@xs.row\:6\@xs {
    grid-row: span 6/span 6;
  }
  /**
   * Grid offset
   */
  .offset\:6\@xs {
    grid-column-start: 6 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:7\@xs {
    grid-template-columns: repeat(1.7142857143, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:7,
  .al-u-grid__item.col\:7\@xs.col\:7\@xs {
    grid-column: span 7/span 7;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:7,
  .al-u-grid__item.row\:7\@xs.row\:7\@xs {
    grid-row: span 7/span 7;
  }
  /**
   * Grid offset
   */
  .offset\:7\@xs {
    grid-column-start: 7 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:8\@xs {
    grid-template-columns: repeat(1.5, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:8,
  .al-u-grid__item.col\:8\@xs.col\:8\@xs {
    grid-column: span 8/span 8;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:8,
  .al-u-grid__item.row\:8\@xs.row\:8\@xs {
    grid-row: span 8/span 8;
  }
  /**
   * Grid offset
   */
  .offset\:8\@xs {
    grid-column-start: 8 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:9\@xs {
    grid-template-columns: repeat(1.3333333333, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:9,
  .al-u-grid__item.col\:9\@xs.col\:9\@xs {
    grid-column: span 9/span 9;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:9,
  .al-u-grid__item.row\:9\@xs.row\:9\@xs {
    grid-row: span 9/span 9;
  }
  /**
   * Grid offset
   */
  .offset\:9\@xs {
    grid-column-start: 9 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:10\@xs {
    grid-template-columns: repeat(1.2, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:10,
  .al-u-grid__item.col\:10\@xs.col\:10\@xs {
    grid-column: span 10/span 10;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:10,
  .al-u-grid__item.row\:10\@xs.row\:10\@xs {
    grid-row: span 10/span 10;
  }
  /**
   * Grid offset
   */
  .offset\:10\@xs {
    grid-column-start: 10 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:11\@xs {
    grid-template-columns: repeat(1.0909090909, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:11,
  .al-u-grid__item.col\:11\@xs.col\:11\@xs {
    grid-column: span 11/span 11;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:11,
  .al-u-grid__item.row\:11\@xs.row\:11\@xs {
    grid-row: span 11/span 11;
  }
  /**
   * Grid offset
   */
  .offset\:11\@xs {
    grid-column-start: 11 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:12\@xs {
    grid-template-columns: repeat(1, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:12,
  .al-u-grid__item.col\:12\@xs.col\:12\@xs {
    grid-column: span 12/span 12;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:12,
  .al-u-grid__item.row\:12\@xs.row\:12\@xs {
    grid-row: span 12/span 12;
  }
  /**
   * Grid offset
   */
  .offset\:12\@xs {
    grid-column-start: 12 !important;
  }
}
/**
 * Grid column generator for sm breakpoint
 */
@media (min-width: 480px) {
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:1\@sm {
    grid-template-columns: repeat(12, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:1,
  .al-u-grid__item.col\:1\@sm.col\:1\@sm {
    grid-column: span 1/span 1;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:1,
  .al-u-grid__item.row\:1\@sm.row\:1\@sm {
    grid-row: span 1/span 1;
  }
  /**
   * Grid offset
   */
  .offset\:1\@sm {
    grid-column-start: 1 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:2\@sm {
    grid-template-columns: repeat(6, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:2,
  .al-u-grid__item.col\:2\@sm.col\:2\@sm {
    grid-column: span 2/span 2;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:2,
  .al-u-grid__item.row\:2\@sm.row\:2\@sm {
    grid-row: span 2/span 2;
  }
  /**
   * Grid offset
   */
  .offset\:2\@sm {
    grid-column-start: 2 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:3\@sm {
    grid-template-columns: repeat(4, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:3,
  .al-u-grid__item.col\:3\@sm.col\:3\@sm {
    grid-column: span 3/span 3;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:3,
  .al-u-grid__item.row\:3\@sm.row\:3\@sm {
    grid-row: span 3/span 3;
  }
  /**
   * Grid offset
   */
  .offset\:3\@sm {
    grid-column-start: 3 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:4\@sm {
    grid-template-columns: repeat(3, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:4,
  .al-u-grid__item.col\:4\@sm.col\:4\@sm {
    grid-column: span 4/span 4;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:4,
  .al-u-grid__item.row\:4\@sm.row\:4\@sm {
    grid-row: span 4/span 4;
  }
  /**
   * Grid offset
   */
  .offset\:4\@sm {
    grid-column-start: 4 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:5\@sm {
    grid-template-columns: repeat(2.4, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:5,
  .al-u-grid__item.col\:5\@sm.col\:5\@sm {
    grid-column: span 5/span 5;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:5,
  .al-u-grid__item.row\:5\@sm.row\:5\@sm {
    grid-row: span 5/span 5;
  }
  /**
   * Grid offset
   */
  .offset\:5\@sm {
    grid-column-start: 5 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:6\@sm {
    grid-template-columns: repeat(2, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:6,
  .al-u-grid__item.col\:6\@sm.col\:6\@sm {
    grid-column: span 6/span 6;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:6,
  .al-u-grid__item.row\:6\@sm.row\:6\@sm {
    grid-row: span 6/span 6;
  }
  /**
   * Grid offset
   */
  .offset\:6\@sm {
    grid-column-start: 6 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:7\@sm {
    grid-template-columns: repeat(1.7142857143, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:7,
  .al-u-grid__item.col\:7\@sm.col\:7\@sm {
    grid-column: span 7/span 7;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:7,
  .al-u-grid__item.row\:7\@sm.row\:7\@sm {
    grid-row: span 7/span 7;
  }
  /**
   * Grid offset
   */
  .offset\:7\@sm {
    grid-column-start: 7 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:8\@sm {
    grid-template-columns: repeat(1.5, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:8,
  .al-u-grid__item.col\:8\@sm.col\:8\@sm {
    grid-column: span 8/span 8;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:8,
  .al-u-grid__item.row\:8\@sm.row\:8\@sm {
    grid-row: span 8/span 8;
  }
  /**
   * Grid offset
   */
  .offset\:8\@sm {
    grid-column-start: 8 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:9\@sm {
    grid-template-columns: repeat(1.3333333333, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:9,
  .al-u-grid__item.col\:9\@sm.col\:9\@sm {
    grid-column: span 9/span 9;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:9,
  .al-u-grid__item.row\:9\@sm.row\:9\@sm {
    grid-row: span 9/span 9;
  }
  /**
   * Grid offset
   */
  .offset\:9\@sm {
    grid-column-start: 9 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:10\@sm {
    grid-template-columns: repeat(1.2, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:10,
  .al-u-grid__item.col\:10\@sm.col\:10\@sm {
    grid-column: span 10/span 10;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:10,
  .al-u-grid__item.row\:10\@sm.row\:10\@sm {
    grid-row: span 10/span 10;
  }
  /**
   * Grid offset
   */
  .offset\:10\@sm {
    grid-column-start: 10 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:11\@sm {
    grid-template-columns: repeat(1.0909090909, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:11,
  .al-u-grid__item.col\:11\@sm.col\:11\@sm {
    grid-column: span 11/span 11;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:11,
  .al-u-grid__item.row\:11\@sm.row\:11\@sm {
    grid-row: span 11/span 11;
  }
  /**
   * Grid offset
   */
  .offset\:11\@sm {
    grid-column-start: 11 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:12\@sm {
    grid-template-columns: repeat(1, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:12,
  .al-u-grid__item.col\:12\@sm.col\:12\@sm {
    grid-column: span 12/span 12;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:12,
  .al-u-grid__item.row\:12\@sm.row\:12\@sm {
    grid-row: span 12/span 12;
  }
  /**
   * Grid offset
   */
  .offset\:12\@sm {
    grid-column-start: 12 !important;
  }
}
/**
 * Grid column generator for md breakpoint
 */
@media (min-width: 768px) {
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:1\@md {
    grid-template-columns: repeat(12, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:1,
  .al-u-grid__item.col\:1\@md.col\:1\@md {
    grid-column: span 1/span 1;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:1,
  .al-u-grid__item.row\:1\@md.row\:1\@md {
    grid-row: span 1/span 1;
  }
  /**
   * Grid offset
   */
  .offset\:1\@md {
    grid-column-start: 1 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:2\@md {
    grid-template-columns: repeat(6, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:2,
  .al-u-grid__item.col\:2\@md.col\:2\@md {
    grid-column: span 2/span 2;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:2,
  .al-u-grid__item.row\:2\@md.row\:2\@md {
    grid-row: span 2/span 2;
  }
  /**
   * Grid offset
   */
  .offset\:2\@md {
    grid-column-start: 2 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:3\@md {
    grid-template-columns: repeat(4, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:3,
  .al-u-grid__item.col\:3\@md.col\:3\@md {
    grid-column: span 3/span 3;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:3,
  .al-u-grid__item.row\:3\@md.row\:3\@md {
    grid-row: span 3/span 3;
  }
  /**
   * Grid offset
   */
  .offset\:3\@md {
    grid-column-start: 3 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:4\@md {
    grid-template-columns: repeat(3, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:4,
  .al-u-grid__item.col\:4\@md.col\:4\@md {
    grid-column: span 4/span 4;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:4,
  .al-u-grid__item.row\:4\@md.row\:4\@md {
    grid-row: span 4/span 4;
  }
  /**
   * Grid offset
   */
  .offset\:4\@md {
    grid-column-start: 4 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:5\@md {
    grid-template-columns: repeat(2.4, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:5,
  .al-u-grid__item.col\:5\@md.col\:5\@md {
    grid-column: span 5/span 5;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:5,
  .al-u-grid__item.row\:5\@md.row\:5\@md {
    grid-row: span 5/span 5;
  }
  /**
   * Grid offset
   */
  .offset\:5\@md {
    grid-column-start: 5 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:6\@md {
    grid-template-columns: repeat(2, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:6,
  .al-u-grid__item.col\:6\@md.col\:6\@md {
    grid-column: span 6/span 6;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:6,
  .al-u-grid__item.row\:6\@md.row\:6\@md {
    grid-row: span 6/span 6;
  }
  /**
   * Grid offset
   */
  .offset\:6\@md {
    grid-column-start: 6 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:7\@md {
    grid-template-columns: repeat(1.7142857143, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:7,
  .al-u-grid__item.col\:7\@md.col\:7\@md {
    grid-column: span 7/span 7;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:7,
  .al-u-grid__item.row\:7\@md.row\:7\@md {
    grid-row: span 7/span 7;
  }
  /**
   * Grid offset
   */
  .offset\:7\@md {
    grid-column-start: 7 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:8\@md {
    grid-template-columns: repeat(1.5, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:8,
  .al-u-grid__item.col\:8\@md.col\:8\@md {
    grid-column: span 8/span 8;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:8,
  .al-u-grid__item.row\:8\@md.row\:8\@md {
    grid-row: span 8/span 8;
  }
  /**
   * Grid offset
   */
  .offset\:8\@md {
    grid-column-start: 8 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:9\@md {
    grid-template-columns: repeat(1.3333333333, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:9,
  .al-u-grid__item.col\:9\@md.col\:9\@md {
    grid-column: span 9/span 9;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:9,
  .al-u-grid__item.row\:9\@md.row\:9\@md {
    grid-row: span 9/span 9;
  }
  /**
   * Grid offset
   */
  .offset\:9\@md {
    grid-column-start: 9 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:10\@md {
    grid-template-columns: repeat(1.2, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:10,
  .al-u-grid__item.col\:10\@md.col\:10\@md {
    grid-column: span 10/span 10;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:10,
  .al-u-grid__item.row\:10\@md.row\:10\@md {
    grid-row: span 10/span 10;
  }
  /**
   * Grid offset
   */
  .offset\:10\@md {
    grid-column-start: 10 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:11\@md {
    grid-template-columns: repeat(1.0909090909, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:11,
  .al-u-grid__item.col\:11\@md.col\:11\@md {
    grid-column: span 11/span 11;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:11,
  .al-u-grid__item.row\:11\@md.row\:11\@md {
    grid-row: span 11/span 11;
  }
  /**
   * Grid offset
   */
  .offset\:11\@md {
    grid-column-start: 11 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:12\@md {
    grid-template-columns: repeat(1, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:12,
  .al-u-grid__item.col\:12\@md.col\:12\@md {
    grid-column: span 12/span 12;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:12,
  .al-u-grid__item.row\:12\@md.row\:12\@md {
    grid-row: span 12/span 12;
  }
  /**
   * Grid offset
   */
  .offset\:12\@md {
    grid-column-start: 12 !important;
  }
}
/**
 * Grid column generator for lg breakpoint
 */
@media (min-width: 1024px) {
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:1\@lg {
    grid-template-columns: repeat(12, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:1,
  .al-u-grid__item.col\:1\@lg.col\:1\@lg {
    grid-column: span 1/span 1;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:1,
  .al-u-grid__item.row\:1\@lg.row\:1\@lg {
    grid-row: span 1/span 1;
  }
  /**
   * Grid offset
   */
  .offset\:1\@lg {
    grid-column-start: 1 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:2\@lg {
    grid-template-columns: repeat(6, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:2,
  .al-u-grid__item.col\:2\@lg.col\:2\@lg {
    grid-column: span 2/span 2;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:2,
  .al-u-grid__item.row\:2\@lg.row\:2\@lg {
    grid-row: span 2/span 2;
  }
  /**
   * Grid offset
   */
  .offset\:2\@lg {
    grid-column-start: 2 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:3\@lg {
    grid-template-columns: repeat(4, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:3,
  .al-u-grid__item.col\:3\@lg.col\:3\@lg {
    grid-column: span 3/span 3;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:3,
  .al-u-grid__item.row\:3\@lg.row\:3\@lg {
    grid-row: span 3/span 3;
  }
  /**
   * Grid offset
   */
  .offset\:3\@lg {
    grid-column-start: 3 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:4\@lg {
    grid-template-columns: repeat(3, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:4,
  .al-u-grid__item.col\:4\@lg.col\:4\@lg {
    grid-column: span 4/span 4;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:4,
  .al-u-grid__item.row\:4\@lg.row\:4\@lg {
    grid-row: span 4/span 4;
  }
  /**
   * Grid offset
   */
  .offset\:4\@lg {
    grid-column-start: 4 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:5\@lg {
    grid-template-columns: repeat(2.4, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:5,
  .al-u-grid__item.col\:5\@lg.col\:5\@lg {
    grid-column: span 5/span 5;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:5,
  .al-u-grid__item.row\:5\@lg.row\:5\@lg {
    grid-row: span 5/span 5;
  }
  /**
   * Grid offset
   */
  .offset\:5\@lg {
    grid-column-start: 5 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:6\@lg {
    grid-template-columns: repeat(2, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:6,
  .al-u-grid__item.col\:6\@lg.col\:6\@lg {
    grid-column: span 6/span 6;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:6,
  .al-u-grid__item.row\:6\@lg.row\:6\@lg {
    grid-row: span 6/span 6;
  }
  /**
   * Grid offset
   */
  .offset\:6\@lg {
    grid-column-start: 6 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:7\@lg {
    grid-template-columns: repeat(1.7142857143, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:7,
  .al-u-grid__item.col\:7\@lg.col\:7\@lg {
    grid-column: span 7/span 7;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:7,
  .al-u-grid__item.row\:7\@lg.row\:7\@lg {
    grid-row: span 7/span 7;
  }
  /**
   * Grid offset
   */
  .offset\:7\@lg {
    grid-column-start: 7 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:8\@lg {
    grid-template-columns: repeat(1.5, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:8,
  .al-u-grid__item.col\:8\@lg.col\:8\@lg {
    grid-column: span 8/span 8;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:8,
  .al-u-grid__item.row\:8\@lg.row\:8\@lg {
    grid-row: span 8/span 8;
  }
  /**
   * Grid offset
   */
  .offset\:8\@lg {
    grid-column-start: 8 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:9\@lg {
    grid-template-columns: repeat(1.3333333333, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:9,
  .al-u-grid__item.col\:9\@lg.col\:9\@lg {
    grid-column: span 9/span 9;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:9,
  .al-u-grid__item.row\:9\@lg.row\:9\@lg {
    grid-row: span 9/span 9;
  }
  /**
   * Grid offset
   */
  .offset\:9\@lg {
    grid-column-start: 9 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:10\@lg {
    grid-template-columns: repeat(1.2, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:10,
  .al-u-grid__item.col\:10\@lg.col\:10\@lg {
    grid-column: span 10/span 10;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:10,
  .al-u-grid__item.row\:10\@lg.row\:10\@lg {
    grid-row: span 10/span 10;
  }
  /**
   * Grid offset
   */
  .offset\:10\@lg {
    grid-column-start: 10 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:11\@lg {
    grid-template-columns: repeat(1.0909090909, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:11,
  .al-u-grid__item.col\:11\@lg.col\:11\@lg {
    grid-column: span 11/span 11;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:11,
  .al-u-grid__item.row\:11\@lg.row\:11\@lg {
    grid-row: span 11/span 11;
  }
  /**
   * Grid offset
   */
  .offset\:11\@lg {
    grid-column-start: 11 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:12\@lg {
    grid-template-columns: repeat(1, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:12,
  .al-u-grid__item.col\:12\@lg.col\:12\@lg {
    grid-column: span 12/span 12;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:12,
  .al-u-grid__item.row\:12\@lg.row\:12\@lg {
    grid-row: span 12/span 12;
  }
  /**
   * Grid offset
   */
  .offset\:12\@lg {
    grid-column-start: 12 !important;
  }
}
/**
 * Grid column generator for xl breakpoint
 */
@media (min-width: 1260px) {
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:1\@xl {
    grid-template-columns: repeat(12, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:1,
  .al-u-grid__item.col\:1\@xl.col\:1\@xl {
    grid-column: span 1/span 1;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:1,
  .al-u-grid__item.row\:1\@xl.row\:1\@xl {
    grid-row: span 1/span 1;
  }
  /**
   * Grid offset
   */
  .offset\:1\@xl {
    grid-column-start: 1 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:2\@xl {
    grid-template-columns: repeat(6, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:2,
  .al-u-grid__item.col\:2\@xl.col\:2\@xl {
    grid-column: span 2/span 2;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:2,
  .al-u-grid__item.row\:2\@xl.row\:2\@xl {
    grid-row: span 2/span 2;
  }
  /**
   * Grid offset
   */
  .offset\:2\@xl {
    grid-column-start: 2 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:3\@xl {
    grid-template-columns: repeat(4, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:3,
  .al-u-grid__item.col\:3\@xl.col\:3\@xl {
    grid-column: span 3/span 3;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:3,
  .al-u-grid__item.row\:3\@xl.row\:3\@xl {
    grid-row: span 3/span 3;
  }
  /**
   * Grid offset
   */
  .offset\:3\@xl {
    grid-column-start: 3 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:4\@xl {
    grid-template-columns: repeat(3, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:4,
  .al-u-grid__item.col\:4\@xl.col\:4\@xl {
    grid-column: span 4/span 4;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:4,
  .al-u-grid__item.row\:4\@xl.row\:4\@xl {
    grid-row: span 4/span 4;
  }
  /**
   * Grid offset
   */
  .offset\:4\@xl {
    grid-column-start: 4 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:5\@xl {
    grid-template-columns: repeat(2.4, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:5,
  .al-u-grid__item.col\:5\@xl.col\:5\@xl {
    grid-column: span 5/span 5;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:5,
  .al-u-grid__item.row\:5\@xl.row\:5\@xl {
    grid-row: span 5/span 5;
  }
  /**
   * Grid offset
   */
  .offset\:5\@xl {
    grid-column-start: 5 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:6\@xl {
    grid-template-columns: repeat(2, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:6,
  .al-u-grid__item.col\:6\@xl.col\:6\@xl {
    grid-column: span 6/span 6;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:6,
  .al-u-grid__item.row\:6\@xl.row\:6\@xl {
    grid-row: span 6/span 6;
  }
  /**
   * Grid offset
   */
  .offset\:6\@xl {
    grid-column-start: 6 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:7\@xl {
    grid-template-columns: repeat(1.7142857143, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:7,
  .al-u-grid__item.col\:7\@xl.col\:7\@xl {
    grid-column: span 7/span 7;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:7,
  .al-u-grid__item.row\:7\@xl.row\:7\@xl {
    grid-row: span 7/span 7;
  }
  /**
   * Grid offset
   */
  .offset\:7\@xl {
    grid-column-start: 7 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:8\@xl {
    grid-template-columns: repeat(1.5, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:8,
  .al-u-grid__item.col\:8\@xl.col\:8\@xl {
    grid-column: span 8/span 8;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:8,
  .al-u-grid__item.row\:8\@xl.row\:8\@xl {
    grid-row: span 8/span 8;
  }
  /**
   * Grid offset
   */
  .offset\:8\@xl {
    grid-column-start: 8 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:9\@xl {
    grid-template-columns: repeat(1.3333333333, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:9,
  .al-u-grid__item.col\:9\@xl.col\:9\@xl {
    grid-column: span 9/span 9;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:9,
  .al-u-grid__item.row\:9\@xl.row\:9\@xl {
    grid-row: span 9/span 9;
  }
  /**
   * Grid offset
   */
  .offset\:9\@xl {
    grid-column-start: 9 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:10\@xl {
    grid-template-columns: repeat(1.2, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:10,
  .al-u-grid__item.col\:10\@xl.col\:10\@xl {
    grid-column: span 10/span 10;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:10,
  .al-u-grid__item.row\:10\@xl.row\:10\@xl {
    grid-row: span 10/span 10;
  }
  /**
   * Grid offset
   */
  .offset\:10\@xl {
    grid-column-start: 10 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:11\@xl {
    grid-template-columns: repeat(1.0909090909, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:11,
  .al-u-grid__item.col\:11\@xl.col\:11\@xl {
    grid-column: span 11/span 11;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:11,
  .al-u-grid__item.row\:11\@xl.row\:11\@xl {
    grid-row: span 11/span 11;
  }
  /**
   * Grid offset
   */
  .offset\:11\@xl {
    grid-column-start: 11 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:12\@xl {
    grid-template-columns: repeat(1, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:12,
  .al-u-grid__item.col\:12\@xl.col\:12\@xl {
    grid-column: span 12/span 12;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:12,
  .al-u-grid__item.row\:12\@xl.row\:12\@xl {
    grid-row: span 12/span 12;
  }
  /**
   * Grid offset
   */
  .offset\:12\@xl {
    grid-column-start: 12 !important;
  }
}
/**
 * Grid column generator for xxl breakpoint
 */
@media (min-width: 1440px) {
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:1\@xxl {
    grid-template-columns: repeat(12, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:1,
  .al-u-grid__item.col\:1\@xxl.col\:1\@xxl {
    grid-column: span 1/span 1;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:1,
  .al-u-grid__item.row\:1\@xxl.row\:1\@xxl {
    grid-row: span 1/span 1;
  }
  /**
   * Grid offset
   */
  .offset\:1\@xxl {
    grid-column-start: 1 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:2\@xxl {
    grid-template-columns: repeat(6, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:2,
  .al-u-grid__item.col\:2\@xxl.col\:2\@xxl {
    grid-column: span 2/span 2;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:2,
  .al-u-grid__item.row\:2\@xxl.row\:2\@xxl {
    grid-row: span 2/span 2;
  }
  /**
   * Grid offset
   */
  .offset\:2\@xxl {
    grid-column-start: 2 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:3\@xxl {
    grid-template-columns: repeat(4, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:3,
  .al-u-grid__item.col\:3\@xxl.col\:3\@xxl {
    grid-column: span 3/span 3;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:3,
  .al-u-grid__item.row\:3\@xxl.row\:3\@xxl {
    grid-row: span 3/span 3;
  }
  /**
   * Grid offset
   */
  .offset\:3\@xxl {
    grid-column-start: 3 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:4\@xxl {
    grid-template-columns: repeat(3, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:4,
  .al-u-grid__item.col\:4\@xxl.col\:4\@xxl {
    grid-column: span 4/span 4;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:4,
  .al-u-grid__item.row\:4\@xxl.row\:4\@xxl {
    grid-row: span 4/span 4;
  }
  /**
   * Grid offset
   */
  .offset\:4\@xxl {
    grid-column-start: 4 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:5\@xxl {
    grid-template-columns: repeat(2.4, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:5,
  .al-u-grid__item.col\:5\@xxl.col\:5\@xxl {
    grid-column: span 5/span 5;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:5,
  .al-u-grid__item.row\:5\@xxl.row\:5\@xxl {
    grid-row: span 5/span 5;
  }
  /**
   * Grid offset
   */
  .offset\:5\@xxl {
    grid-column-start: 5 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:6\@xxl {
    grid-template-columns: repeat(2, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:6,
  .al-u-grid__item.col\:6\@xxl.col\:6\@xxl {
    grid-column: span 6/span 6;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:6,
  .al-u-grid__item.row\:6\@xxl.row\:6\@xxl {
    grid-row: span 6/span 6;
  }
  /**
   * Grid offset
   */
  .offset\:6\@xxl {
    grid-column-start: 6 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:7\@xxl {
    grid-template-columns: repeat(1.7142857143, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:7,
  .al-u-grid__item.col\:7\@xxl.col\:7\@xxl {
    grid-column: span 7/span 7;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:7,
  .al-u-grid__item.row\:7\@xxl.row\:7\@xxl {
    grid-row: span 7/span 7;
  }
  /**
   * Grid offset
   */
  .offset\:7\@xxl {
    grid-column-start: 7 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:8\@xxl {
    grid-template-columns: repeat(1.5, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:8,
  .al-u-grid__item.col\:8\@xxl.col\:8\@xxl {
    grid-column: span 8/span 8;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:8,
  .al-u-grid__item.row\:8\@xxl.row\:8\@xxl {
    grid-row: span 8/span 8;
  }
  /**
   * Grid offset
   */
  .offset\:8\@xxl {
    grid-column-start: 8 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:9\@xxl {
    grid-template-columns: repeat(1.3333333333, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:9,
  .al-u-grid__item.col\:9\@xxl.col\:9\@xxl {
    grid-column: span 9/span 9;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:9,
  .al-u-grid__item.row\:9\@xxl.row\:9\@xxl {
    grid-row: span 9/span 9;
  }
  /**
   * Grid offset
   */
  .offset\:9\@xxl {
    grid-column-start: 9 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:10\@xxl {
    grid-template-columns: repeat(1.2, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:10,
  .al-u-grid__item.col\:10\@xxl.col\:10\@xxl {
    grid-column: span 10/span 10;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:10,
  .al-u-grid__item.row\:10\@xxl.row\:10\@xxl {
    grid-row: span 10/span 10;
  }
  /**
   * Grid offset
   */
  .offset\:10\@xxl {
    grid-column-start: 10 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:11\@xxl {
    grid-template-columns: repeat(1.0909090909, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:11,
  .al-u-grid__item.col\:11\@xxl.col\:11\@xxl {
    grid-column: span 11/span 11;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:11,
  .al-u-grid__item.row\:11\@xxl.row\:11\@xxl {
    grid-row: span 11/span 11;
  }
  /**
   * Grid offset
   */
  .offset\:11\@xxl {
    grid-column-start: 11 !important;
  }
  /**
   * Grid implicit column
   */
  .al-u-grid.cols\:12\@xxl {
    grid-template-columns: repeat(1, 1fr);
  }
  /**
   * Grid explicit column
   * - Deliberately NOT scoped under `.al-u-grid`: the grid container may be
   *   an `<al-layout variant="grid">` shadow root, in which case no
   *   `.al-u-grid` ancestor exists in the light DOM for these items to match
   *   against. Dropping the ancestor makes the same span classes work in both
   *   a light-DOM `.al-u-grid` and slotted into a Layout grid.
   * - The breakpoint selector is DOUBLED (`.col\:6\@lg.col\:6\@lg`) to keep
   *   the specificity the dropped `.al-u-grid` ancestor used to provide. The
   *   un-suffixed `.col:N` rule is re-emitted inside every breakpoint block,
   *   so at equal specificity a later `i` in the loop (say `col:12`) would
   *   beat an earlier breakpoint override (`col:6@lg`) on source order alone.
   *   The doubled class restores the old cascade without an ancestor.
   */
  .al-u-grid__item.col\:12,
  .al-u-grid__item.col\:12\@xxl.col\:12\@xxl {
    grid-column: span 12/span 12;
  }
  /**
   * Grid explicit row
   */
  .al-u-grid__item.row\:12,
  .al-u-grid__item.row\:12\@xxl.row\:12\@xxl {
    grid-row: span 12/span 12;
  }
  /**
   * Grid offset
   */
  .offset\:12\@xxl {
    grid-column-start: 12 !important;
  }
}
/**
 * Grid
 */
.al-u-grid {
  display: grid !important;
  grid-gap: var(--al-theme-space);
  grid-template-columns: repeat(1fr, 1fr);
  /**
   * If grid has grid item classes, then set the grid-template-columns
   */
}
.al-u-grid:has(.al-u-grid__item) {
  grid-template-columns: repeat(12, 1fr);
}

/**
 * Grid implicit columns
 */
.al-u-grid.cols\:\@xs,
.al-u-grid.cols\:\@sm,
.al-u-grid.cols\:\@md,
.al-u-grid.cols\:\@lg,
.al-u-grid.cols\:\@xl,
.al-u-grid.cols\:\@xxl {
  grid-template-columns: 12fr;
}

/**
 * Grid item
 */
/**
 * Grid item — a CELL. It stacks whatever it holds and lets that content fill
 * the track it was given.
 *
 * `flex-direction: column` is the correction. The item was a flex ROW, with
 * no rule about how its content should size, which produced two distinct
 * bugs that look unrelated but share this cause:
 *
 * 1. A cell holding SEVERAL blocks laid them out side by side. A cell whose
 *    content is a section rule, a kicker and a heading rendered all three in
 *    a row, each shrink-wrapped, instead of stacked.
 * 2. A cell holding ONE block let it size to `max-content` clamped to the
 *    track (a row-direction flex item is `flex: 0 1 auto`), so the track
 *    width had no effect on anything narrower than it. Six cards in six
 *    identical 410px tracks measured 396 / 328 / 343 / 388 / 369 / 410px.
 *    Cards whose copy happens to overflow their track look correct, which is
 *    why this reads as "some cards are the wrong width" rather than as a
 *    systematic bug.
 *
 * `display: grid` is what fixes both, because grid stretches its item on BOTH
 * axes at once. Flex cannot: a flex item only stretches on the CROSS axis, so
 * `row` fills the height but shrink-wraps the width (bug 2) and `column`
 * fills the width but collapses the height. There is no direction that gets
 * both, and pushing `flex: 1` onto the children buys the missing axis only by
 * equalising a multi-child cell's rows — which stretches a one-line kicker to
 * match the heading below it, i.e. bug 1 again in a new form.
 *
 * A `display` of SOME kind is also mandatory, which is worth stating plainly
 * because removing it looks like an elegant simplification. This class is
 * used two ways:
 *
 *   1. On a plain wrapper — `<div class="al-u-grid__item col:6">`.
 *   2. Directly on a component — `<al-card class="al-u-grid__item col:8@md">`
 *      (the Altitude homepage's bento tiles).
 *
 * In case 2 the component's `:host { display: contents }` means the host
 * generates no box, and `grid-column` only applies to an element that
 * generates one. Drop the `display` and the span classes stop applying
 * entirely: the five homepage tiles auto-placed into single 1/12 columns and
 * rendered ~120px wide instead of spanning 8 and 4 tracks. The document rule
 * here has to beat `:host` to give the host a box for the span to act on.
 *
 * `align-content` is then the one thing that differs between the two cases,
 * and it is why the selector below is a list of plain HTML wrappers rather
 * than a `:has(> * + *)` child count. Counting children is wrong for case 2:
 * a component's light-DOM children are its SLOTTED content, and however many
 * of those there are, its shadow root still contributes exactly one box that
 * should fill the cell. Counting them made the homepage tiles honour
 * `align-content: start` and collapse to their content height inside 256px
 * cells. Element type answers the real question — "is this cell a plain
 * wrapper, or is it a component?" — so a wrapper packs its several blocks to
 * the top, and a component keeps grid's default stretch.
 *
 * `min-inline-size: 0`: a grid item's automatic minimum size is `min-content`,
 * so without it one long unbroken string (a URL, a code span) pushes the cell
 * past its track and blows out the whole grid.
 *
 * This also covers `<al-layout variant="grid">`, which spans children with
 * these same shared classes rather than a second system of its own.
 */
.al-u-grid__item {
  display: grid;
  min-inline-size: 0;
}

/**
 * A plain wrapper holding more than one block stacks them at content height,
 * packed to the top — instead of grid's default, which would share the cell's
 * leftover height out between every row and drift them apart. Restricted to
 * real HTML wrappers on purpose; see the note above.
 */
div.al-u-grid__item:has(> * + *),
section.al-u-grid__item:has(> * + *),
article.al-u-grid__item:has(> * + *),
figure.al-u-grid__item:has(> * + *),
li.al-u-grid__item:has(> * + *),
a.al-u-grid__item:has(> * + *) {
  align-content: start;
}

/**
 * Grid item explicit columns
 * - Extend full-width columns placeholder
 */
.al-u-grid__item.col\:\@xs,
.al-u-grid__item.col\:\@sm,
.al-u-grid__item.col\:\@md,
.al-u-grid__item.col\:\@lg,
.al-u-grid__item.col\:\@xl,
.al-u-grid__item.col\:\@xxl {
  grid-column: span 12;
}

.al-u-grid__item.col\:\@xs,
.al-u-grid__item.col\:\@sm,
.al-u-grid__item.col\:\@md,
.al-u-grid__item.col\:\@lg,
.al-u-grid__item.col\:\@xl,
.al-u-grid__item.col\:\@xxl {
  grid-column: span 12;
}

.al-u-grid__item.col\:\@xs,
.al-u-grid__item.col\:\@sm,
.al-u-grid__item.col\:\@md,
.al-u-grid__item.col\:\@lg,
.al-u-grid__item.col\:\@xl,
.al-u-grid__item.col\:\@xxl {
  grid-column: span 12;
}

.al-u-grid__item.col\:\@xs,
.al-u-grid__item.col\:\@sm,
.al-u-grid__item.col\:\@md,
.al-u-grid__item.col\:\@lg,
.al-u-grid__item.col\:\@xl,
.al-u-grid__item.col\:\@xxl {
  grid-column: span 12;
}

.al-u-grid__item.col\:\@xs,
.al-u-grid__item.col\:\@sm,
.al-u-grid__item.col\:\@md,
.al-u-grid__item.col\:\@lg,
.al-u-grid__item.col\:\@xl,
.al-u-grid__item.col\:\@xxl {
  grid-column: span 12;
}

.al-u-grid__item.col\:\@xs,
.al-u-grid__item.col\:\@sm,
.al-u-grid__item.col\:\@md,
.al-u-grid__item.col\:\@lg,
.al-u-grid__item.col\:\@xl,
.al-u-grid__item.col\:\@xxl {
  grid-column: span 12;
}

.al-u-grid__item.col\:\@xs,
.al-u-grid__item.col\:\@sm,
.al-u-grid__item.col\:\@md,
.al-u-grid__item.col\:\@lg,
.al-u-grid__item.col\:\@xl,
.al-u-grid__item.col\:\@xxl {
  grid-column: span 12;
}

.al-u-grid__item.col\:\@xs,
.al-u-grid__item.col\:\@sm,
.al-u-grid__item.col\:\@md,
.al-u-grid__item.col\:\@lg,
.al-u-grid__item.col\:\@xl,
.al-u-grid__item.col\:\@xxl {
  grid-column: span 12;
}

.al-u-grid__item.col\:\@xs,
.al-u-grid__item.col\:\@sm,
.al-u-grid__item.col\:\@md,
.al-u-grid__item.col\:\@lg,
.al-u-grid__item.col\:\@xl,
.al-u-grid__item.col\:\@xxl {
  grid-column: span 12;
}

.al-u-grid__item.col\:\@xs,
.al-u-grid__item.col\:\@sm,
.al-u-grid__item.col\:\@md,
.al-u-grid__item.col\:\@lg,
.al-u-grid__item.col\:\@xl,
.al-u-grid__item.col\:\@xxl {
  grid-column: span 12;
}

.al-u-grid__item.col\:\@xs,
.al-u-grid__item.col\:\@sm,
.al-u-grid__item.col\:\@md,
.al-u-grid__item.col\:\@lg,
.al-u-grid__item.col\:\@xl,
.al-u-grid__item.col\:\@xxl {
  grid-column: span 12;
}

.al-u-grid__item.col\:\@xs,
.al-u-grid__item.col\:\@sm,
.al-u-grid__item.col\:\@md,
.al-u-grid__item.col\:\@lg,
.al-u-grid__item.col\:\@xl,
.al-u-grid__item.col\:\@xxl {
  grid-column: span 12;
}

/**
 * Grid alignment utility classes
 */
.al-u-grid--align-center {
  align-items: center;
}

.al-u-grid--align-end {
  align-items: flex-end;
}

.al-u-grid--align-stretch {
  align-items: stretch;
}

.al-u-grid--justify-center {
  justify-content: center;
}

.al-u-grid--justify-end {
  justify-content: flex-end;
}

.al-u-grid--justify-space-between {
  justify-content: space-between;
}

.al-u-flex-direction-row {
  flex-direction: row;
}

/* ------------------------------------*\
  #TYPOGRAPHY TIER-1 UTILITIES
\*------------------------------------ */
.al-typography-preset-body-xs {
  font: var(--al-typography-preset-body-xs);
  letter-spacing: var(--al-typography-preset-body-xs-letter-spacing);
}

.al-typography-preset-body-xs-bold {
  font: var(--al-typography-preset-body-xs);
  letter-spacing: var(--al-typography-preset-body-xs-letter-spacing);
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-typography-preset-body-xs-bold-letter-spacing) !important;
}

.al-typography-preset-body-sm {
  font: var(--al-typography-preset-body-sm);
  letter-spacing: var(--al-typography-preset-body-sm-letter-spacing);
}

.al-typography-preset-body-sm-bold {
  font: var(--al-typography-preset-body-sm);
  letter-spacing: var(--al-typography-preset-body-sm-letter-spacing);
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-typography-preset-body-sm-bold-letter-spacing) !important;
}

.al-typography-preset-body-md {
  font: var(--al-typography-preset-body-md);
  letter-spacing: var(--al-typography-preset-body-md-letter-spacing);
}

.al-typography-preset-body-md-bold {
  font: var(--al-typography-preset-body-md);
  letter-spacing: var(--al-typography-preset-body-md-letter-spacing);
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-typography-preset-body-md-bold-letter-spacing) !important;
}

.al-typography-preset-body-lg {
  font: var(--al-typography-preset-body-lg);
  letter-spacing: var(--al-typography-preset-body-lg-letter-spacing);
}

.al-typography-preset-body-lg-bold {
  font: var(--al-typography-preset-body-lg);
  letter-spacing: var(--al-typography-preset-body-lg-letter-spacing);
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-typography-preset-body-lg-bold-letter-spacing) !important;
}

.al-typography-preset-heading-sm {
  font: var(--al-typography-preset-heading-sm);
  letter-spacing: var(--al-typography-preset-heading-sm-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-typography-preset-heading-sm {
    font: var(--al-typography-preset-body-lg);
    letter-spacing: var(--al-typography-preset-body-lg-letter-spacing);
  }
}

.al-typography-preset-heading-sm-bold {
  font: var(--al-typography-preset-heading-sm);
  letter-spacing: var(--al-typography-preset-heading-sm-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-typography-preset-heading-sm-bold {
    font: var(--al-typography-preset-body-lg);
    letter-spacing: var(--al-typography-preset-body-lg-letter-spacing);
  }
}
.al-typography-preset-heading-sm-bold {
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-typography-preset-heading-sm-bold-letter-spacing) !important;
}

.al-typography-preset-heading-md {
  font: var(--al-typography-preset-heading-md);
  letter-spacing: var(--al-typography-preset-heading-md-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-typography-preset-heading-md {
    font: var(--al-typography-preset-heading-sm);
    letter-spacing: var(--al-typography-preset-heading-sm-letter-spacing);
  }
}

.al-typography-preset-heading-md-bold {
  font: var(--al-typography-preset-heading-md);
  letter-spacing: var(--al-typography-preset-heading-md-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-typography-preset-heading-md-bold {
    font: var(--al-typography-preset-heading-sm);
    letter-spacing: var(--al-typography-preset-heading-sm-letter-spacing);
  }
}
.al-typography-preset-heading-md-bold {
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-typography-preset-heading-md-bold-letter-spacing) !important;
}

.al-typography-preset-heading-lg {
  font: var(--al-typography-preset-heading-lg);
  letter-spacing: var(--al-typography-preset-heading-lg-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-typography-preset-heading-lg {
    font: var(--al-typography-preset-heading-md);
    letter-spacing: var(--al-typography-preset-heading-md-letter-spacing);
  }
}

.al-typography-preset-heading-lg-bold {
  font: var(--al-typography-preset-heading-lg);
  letter-spacing: var(--al-typography-preset-heading-lg-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-typography-preset-heading-lg-bold {
    font: var(--al-typography-preset-heading-md);
    letter-spacing: var(--al-typography-preset-heading-md-letter-spacing);
  }
}
.al-typography-preset-heading-lg-bold {
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-typography-preset-heading-lg-bold-letter-spacing) !important;
}

.al-typography-preset-display-sm {
  font: var(--al-typography-preset-display-sm);
  letter-spacing: var(--al-typography-preset-display-sm-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-typography-preset-display-sm {
    font: var(--al-typography-preset-heading-lg);
    letter-spacing: var(--al-typography-preset-heading-lg-letter-spacing);
  }
}

.al-typography-preset-display-sm-bold {
  font: var(--al-typography-preset-display-sm);
  letter-spacing: var(--al-typography-preset-display-sm-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-typography-preset-display-sm-bold {
    font: var(--al-typography-preset-heading-lg);
    letter-spacing: var(--al-typography-preset-heading-lg-letter-spacing);
  }
}
.al-typography-preset-display-sm-bold {
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-typography-preset-display-sm-bold-letter-spacing) !important;
}

.al-typography-preset-display-md {
  font: var(--al-typography-preset-display-md);
  letter-spacing: var(--al-typography-preset-display-md-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-typography-preset-display-md {
    font: var(--al-typography-preset-display-sm);
    letter-spacing: var(--al-typography-preset-display-sm-letter-spacing);
  }
}

.al-typography-preset-display-md-bold {
  font: var(--al-typography-preset-display-md);
  letter-spacing: var(--al-typography-preset-display-md-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-typography-preset-display-md-bold {
    font: var(--al-typography-preset-display-sm);
    letter-spacing: var(--al-typography-preset-display-sm-letter-spacing);
  }
}
.al-typography-preset-display-md-bold {
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-typography-preset-display-md-bold-letter-spacing) !important;
}

.al-typography-preset-display-lg {
  font: var(--al-typography-preset-display-lg);
  letter-spacing: var(--al-typography-preset-display-lg-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-typography-preset-display-lg {
    font: var(--al-typography-preset-display-md);
    letter-spacing: var(--al-typography-preset-display-md-letter-spacing);
  }
}

.al-typography-preset-display-lg-bold {
  font: var(--al-typography-preset-display-lg);
  letter-spacing: var(--al-typography-preset-display-lg-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-typography-preset-display-lg-bold {
    font: var(--al-typography-preset-display-md);
    letter-spacing: var(--al-typography-preset-display-md-letter-spacing);
  }
}
.al-typography-preset-display-lg-bold {
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-typography-preset-display-lg-bold-letter-spacing) !important;
}

/* ------------------------------------*\
  #TYPOGRAPHY TIER-2 UTILITIES
\*------------------------------------ */
/**
 * Body
 */
.al-u-theme-typography-body-xs {
  font: var(--al-theme-typography-body-xs);
  letter-spacing: var(--al-theme-typography-body-xs-letter-spacing);
}

.al-u-theme-typography-body-xs-bold {
  font: var(--al-theme-typography-body-xs);
  letter-spacing: var(--al-theme-typography-body-xs-letter-spacing);
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-theme-typography-body-xs-bold-letter-spacing) !important;
}

.al-u-theme-typography-body-sm {
  font: var(--al-theme-typography-body-sm);
  letter-spacing: var(--al-theme-typography-body-sm-letter-spacing);
}

.al-u-theme-typography-body-sm-bold {
  font: var(--al-theme-typography-body-sm);
  letter-spacing: var(--al-theme-typography-body-sm-letter-spacing);
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-theme-typography-body-sm-bold-letter-spacing) !important;
}

.al-u-theme-typography-body-md {
  font: var(--al-theme-typography-body-md);
  letter-spacing: var(--al-theme-typography-body-md-letter-spacing);
}

.al-u-theme-typography-body-md-bold {
  font: var(--al-theme-typography-body-md);
  letter-spacing: var(--al-theme-typography-body-md-letter-spacing);
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-theme-typography-body-md-bold-letter-spacing) !important;
}

.al-u-theme-typography-body-lg {
  font: var(--al-theme-typography-body-lg);
  letter-spacing: var(--al-theme-typography-body-lg-letter-spacing);
}

.al-u-theme-typography-body-lg-bold {
  font: var(--al-theme-typography-body-lg);
  letter-spacing: var(--al-theme-typography-body-lg-letter-spacing);
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-theme-typography-body-lg-bold-letter-spacing) !important;
}

/**
 * Heading
 */
.al-u-theme-typography-heading-sm {
  font: var(--al-theme-typography-heading-sm);
  letter-spacing: var(--al-theme-typography-heading-sm-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-u-theme-typography-heading-sm {
    font: var(--al-theme-typography-body-lg);
    letter-spacing: var(--al-theme-typography-body-lg-letter-spacing);
  }
}

.al-u-theme-typography-heading-sm-bold {
  font: var(--al-theme-typography-heading-sm);
  letter-spacing: var(--al-theme-typography-heading-sm-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-u-theme-typography-heading-sm-bold {
    font: var(--al-theme-typography-body-lg);
    letter-spacing: var(--al-theme-typography-body-lg-letter-spacing);
  }
}
.al-u-theme-typography-heading-sm-bold {
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-theme-typography-heading-sm-bold-letter-spacing) !important;
}

.al-u-theme-typography-heading-md {
  font: var(--al-theme-typography-heading-md);
  letter-spacing: var(--al-theme-typography-heading-md-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-u-theme-typography-heading-md {
    font: var(--al-theme-typography-heading-sm);
    letter-spacing: var(--al-theme-typography-heading-sm-letter-spacing);
  }
}

.al-u-theme-typography-heading-md-bold {
  font: var(--al-theme-typography-heading-md);
  letter-spacing: var(--al-theme-typography-heading-md-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-u-theme-typography-heading-md-bold {
    font: var(--al-theme-typography-heading-sm);
    letter-spacing: var(--al-theme-typography-heading-sm-letter-spacing);
  }
}
.al-u-theme-typography-heading-md-bold {
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-theme-typography-heading-md-bold-letter-spacing) !important;
}

.al-u-theme-typography-heading-lg {
  font: var(--al-theme-typography-heading-lg);
  letter-spacing: var(--al-theme-typography-heading-lg-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-u-theme-typography-heading-lg {
    font: var(--al-theme-typography-heading-md);
    letter-spacing: var(--al-theme-typography-heading-md-letter-spacing);
  }
}

.al-u-theme-typography-heading-lg-bold {
  font: var(--al-theme-typography-heading-lg);
  letter-spacing: var(--al-theme-typography-heading-lg-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-u-theme-typography-heading-lg-bold {
    font: var(--al-theme-typography-heading-md);
    letter-spacing: var(--al-theme-typography-heading-md-letter-spacing);
  }
}
.al-u-theme-typography-heading-lg-bold {
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-theme-typography-heading-lg-bold-letter-spacing) !important;
}

/**
 * Display
 */
.al-u-theme-typography-display-sm {
  font: var(--al-theme-typography-display-sm);
  letter-spacing: var(--al-theme-typography-display-sm-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-u-theme-typography-display-sm {
    font: var(--al-theme-typography-heading-lg);
    letter-spacing: var(--al-theme-typography-heading-lg-letter-spacing);
  }
}

.al-u-theme-typography-display-sm-bold {
  font: var(--al-theme-typography-display-sm);
  letter-spacing: var(--al-theme-typography-display-sm-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-u-theme-typography-display-sm-bold {
    font: var(--al-theme-typography-heading-lg);
    letter-spacing: var(--al-theme-typography-heading-lg-letter-spacing);
  }
}
.al-u-theme-typography-display-sm-bold {
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-theme-typography-display-sm-bold-letter-spacing) !important;
}

.al-u-theme-typography-display-md {
  font: var(--al-theme-typography-display-md);
  letter-spacing: var(--al-theme-typography-display-md-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-u-theme-typography-display-md {
    font: var(--al-theme-typography-display-sm);
    letter-spacing: var(--al-theme-typography-display-sm-letter-spacing);
  }
}

.al-u-theme-typography-display-md-bold {
  font: var(--al-theme-typography-display-md);
  letter-spacing: var(--al-theme-typography-display-md-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-u-theme-typography-display-md-bold {
    font: var(--al-theme-typography-display-sm);
    letter-spacing: var(--al-theme-typography-display-sm-letter-spacing);
  }
}
.al-u-theme-typography-display-md-bold {
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-theme-typography-display-md-bold-letter-spacing) !important;
}

.al-u-theme-typography-display-lg {
  font: var(--al-theme-typography-display-lg);
  letter-spacing: var(--al-theme-typography-display-lg-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-u-theme-typography-display-lg {
    font: var(--al-theme-typography-display-md);
    letter-spacing: var(--al-theme-typography-display-md-letter-spacing);
  }
}

.al-u-theme-typography-display-lg-bold {
  font: var(--al-theme-typography-display-lg);
  letter-spacing: var(--al-theme-typography-display-lg-letter-spacing);
}
@media all and (max-width: 768px) {
  .al-u-theme-typography-display-lg-bold {
    font: var(--al-theme-typography-display-md);
    letter-spacing: var(--al-theme-typography-display-md-letter-spacing);
  }
}
.al-u-theme-typography-display-lg-bold {
  font-weight: var(--al-font-weight-bold) !important;
  letter-spacing: var(--al-theme-typography-display-lg-bold-letter-spacing) !important;
}

/* ------------------------------------*\
  #VISIBILITY UTILITIES
\*------------------------------------ */
.al-u-is-vishidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.al-u-is-overflow-hidden {
  overflow: hidden;
}

/* Storybook specific styles */
.docs-story {
  color: var(--al-theme-color-content-neutral-default);
  background: var(--al-theme-color-body-background);
}

.docblock-argstable ol, .docblock-argstable ul {
  list-style-type: inherit;
  margin-inline-start: var(--al-theme-space-lg);
}