/* CapWise design system: theme.css (palette, roles, themes and every token).
   Generated by _tools/design-system/generate.mjs from _tools/design-system/maps/capwise.mjs (with capwise.auto.json). Edit the source, then run it again. */
/* How it works
   - The palette is locked. Sections never read it directly, they read roles (--role-*).
   - Roles are set for the Original theme on :root. A theme is <html data-theme="<id>">.
   - Style panel changes go on :root after this file (inline style on <html> or a later <style>).
   - Derived colours, buttons and aliases are declared on ":root, [data-theme]" so they follow the roles. */

/* 1. Named palette (locked) */
:root {
  --color-paper: #f8f8f7;
  --color-linen: #efefeb;
  --color-mist-line: #e4e4e2;
  --color-stone: #d6d6d2;
  --color-white: #ffffff;
  --color-graphite: #1a1a1a;
  --color-night: #161616;
  --color-slate: #5c5c59;
  --color-ash: #7c7c7c;
  --color-pebble: #9a9a95;
  --color-fog: #b5b5b0;
  --color-ember: #d9692f;
  --color-deep-ember: #b4531f;
  --color-ember-wash: #f6e6dc;
  --color-growth-green: #8fb996;
  --color-venture-gold: #e9c46a;
  --color-credit-blue: #9db7ff;
  --color-real-assets-coral: #e07a5f;
  --color-jet: #000000;
  --color-lilac-mist: #ede8fa;
  --color-lilac: #ccc4e5;
  --color-violet-shade: #4d4080;
  --color-error-red: #d64545;
}

/* 2. Colour roles: Original */
:root {
  --role-ink: var(--color-graphite);
  --role-page: var(--color-paper);
  --role-surface: var(--color-linen);
  --role-accent: var(--color-ember);
  --role-accent-deep: var(--color-deep-ember);
  --role-line: var(--color-mist-line);
  --role-on-photo: var(--color-white);
  --role-overlay: var(--color-night);
  --role-raised: var(--color-white);
  --role-line-strong: var(--color-stone);
  --role-ink-soft: var(--color-slate);
  --role-ink-muted: var(--color-ash);
  --role-ink-deep: var(--color-night);
  --role-ink-faint: var(--color-pebble);
  --role-ink-ghost: var(--color-fog);
  --role-accent-soft: var(--color-ember-wash);
}

/* 3. Themes: each sets every role. Photo overlay stays dark in every theme. */
[data-theme="original"] {
  --role-ink: var(--color-graphite);
  --role-page: var(--color-paper);
  --role-surface: var(--color-linen);
  --role-accent: var(--color-ember);
  --role-accent-deep: var(--color-deep-ember);
  --role-line: var(--color-mist-line);
  --role-on-photo: var(--color-white);
  --role-overlay: var(--color-night);
  --role-raised: var(--color-white);
  --role-line-strong: var(--color-stone);
  --role-ink-soft: var(--color-slate);
  --role-ink-muted: var(--color-ash);
  --role-ink-deep: var(--color-night);
  --role-ink-faint: var(--color-pebble);
  --role-ink-ghost: var(--color-fog);
  --role-accent-soft: var(--color-ember-wash);
}
[data-theme="private-bank"] {
  color-scheme: light;
  --role-ink: #121826;
  --role-page: #f5f6f8;
  --role-surface: #eaedf2;
  --role-accent: #24508a;
  --role-accent-deep: #1a3c69;
  --role-line: #dde1e8;
  --role-on-photo: #ffffff;
  --role-overlay: #161616;
  --role-raised: #ffffff;
  --role-line-strong: #c9cfd8;
  --role-ink-soft: #3f4757;
  --role-ink-muted: #5d6574;
  --role-ink-deep: #0b0f17;
  --role-ink-faint: #8b909c;
  --role-ink-ghost: #b1b5bd;
  --role-accent-soft: #dde6f2;
}
[data-theme="ledger-green"] {
  color-scheme: light;
  --role-ink: #142019;
  --role-page: #f4f6f1;
  --role-surface: #e8ede4;
  --role-accent: #2f6b40;
  --role-accent-deep: #22502f;
  --role-line: #dbe2d6;
  --role-on-photo: #ffffff;
  --role-overlay: #161616;
  --role-raised: #ffffff;
  --role-line-strong: #c6d0c0;
  --role-ink-soft: #3d4a41;
  --role-ink-muted: #5a665d;
  --role-ink-deep: #0a100c;
  --role-ink-faint: #889189;
  --role-ink-ghost: #afb5ae;
  --role-accent-soft: #dfeadf;
}
[data-theme="boardroom"] {
  color-scheme: light;
  --role-ink: #21170f;
  --role-page: #f7f2ea;
  --role-surface: #eee5d8;
  --role-accent: #9a3d26;
  --role-accent-deep: #77301e;
  --role-line: #e4d9c9;
  --role-on-photo: #ffffff;
  --role-overlay: #161616;
  --role-raised: #fffdf9;
  --role-line-strong: #d3c4ae;
  --role-ink-soft: #4b3e33;
  --role-ink-muted: #6b5d50;
  --role-ink-deep: #110b06;
  --role-ink-faint: #958a7e;
  --role-ink-ghost: #b8afa5;
  --role-accent-soft: #f1dfd6;
}
[data-theme="after-hours"] {
  color-scheme: dark;
  --role-ink: #ecebe7;
  --role-page: #121314;
  --role-surface: #1b1c1e;
  --role-accent: #e8925f;
  --role-accent-deep: #f2b089;
  --role-line: #2c2d30;
  --role-on-photo: #ffffff;
  --role-overlay: #161616;
  --role-raised: #1f2023;
  --role-line-strong: #3a3b3f;
  --role-ink-soft: #c4c3bd;
  --role-ink-muted: #a3a29c;
  --role-ink-deep: #ffffff;
  --role-ink-faint: #787773;
  --role-ink-ghost: #535351;
  --role-accent-soft: #3a2a20;
}
[data-theme="inverted"] {
  color-scheme: dark;
  --role-ink: #f8f8f7;
  --role-page: #1a1a1a;
  --role-surface: #242424;
  --role-accent: #e58556;
  --role-accent-deep: #efa47e;
  --role-line: #333333;
  --role-on-photo: #ffffff;
  --role-overlay: #161616;
  --role-raised: #222222;
  --role-line-strong: #444444;
  --role-ink-soft: #c8c8c4;
  --role-ink-muted: #a6a6a2;
  --role-ink-deep: #ffffff;
  --role-ink-faint: #7c7c79;
  --role-ink-ghost: #595957;
  --role-accent-soft: #3b2a20;
}

/* 4. Derived colours: worked out from roles with color-mix, never stored */
:root,
[data-theme] {
  --tone-raised-16: rgb(from var(--role-raised) r g b / 16%);
  --tone-jet-12: rgb(from var(--color-jet) r g b / 12%);
  --tone-raised-74-ink-muted: color-mix(in srgb, var(--role-raised) 74%, var(--role-ink-muted));
  --tone-ink-88-ink-muted: color-mix(in srgb, var(--role-ink) 88%, var(--role-ink-muted));
  --tone-page-65-raised: color-mix(in srgb, var(--role-page) 65%, var(--role-raised));
  --tone-raised-61-ink-muted: color-mix(in srgb, var(--role-raised) 61%, var(--role-ink-muted));
  --tone-ink-92-ink-muted: color-mix(in srgb, var(--role-ink) 92%, var(--role-ink-muted));
  --tone-ink-74-ink-muted: color-mix(in srgb, var(--role-ink) 74%, var(--role-ink-muted));
  --tone-raised-58-ink-muted: color-mix(in srgb, var(--role-raised) 58%, var(--role-ink-muted));
  --tone-ink-muted-78-raised: color-mix(in srgb, var(--role-ink-muted) 78%, var(--role-raised));
  --tone-jet-40: rgb(from var(--color-jet) r g b / 40%);
  --tone-page-a235: rgb(from var(--role-page) r g b / calc(235 / 255));
  --tone-page-a140: rgb(from var(--role-page) r g b / calc(140 / 255));
  --tone-raised-a140: rgb(from var(--role-raised) r g b / calc(140 / 255));
  --tone-raised-57-page: color-mix(in srgb, var(--role-raised) 57%, var(--role-page));
  --tone-ink-6-ink-ghost-90-credit-blue: color-mix(in srgb, color-mix(in srgb, var(--role-ink) 6%, var(--role-ink-ghost)) 90%, var(--color-credit-blue));
  --tone-line-93-lilac: color-mix(in srgb, var(--role-line) 93%, var(--color-lilac));
  --tone-raised-87-ink-muted: color-mix(in srgb, var(--role-raised) 87%, var(--role-ink-muted));
  --tone-raised-91-ink-muted: color-mix(in srgb, var(--role-raised) 91%, var(--role-ink-muted));
  --tone-violet-shade-46-growth-green-91-credit-blue: color-mix(in srgb, color-mix(in srgb, var(--color-violet-shade) 46%, var(--color-growth-green)) 91%, var(--color-credit-blue));
  --tone-ink-92-ink-muted-40: rgb(from color-mix(in srgb, var(--role-ink) 92%, var(--role-ink-muted)) r g b / 40%);
  --tone-raised-40: rgb(from var(--role-raised) r g b / 40%);
  --tone-jet-90: rgb(from var(--color-jet) r g b / 90%);
  --tone-jet-a20: rgb(from var(--color-jet) r g b / calc(20 / 255));
  --tone-jet-a15: rgb(from var(--color-jet) r g b / calc(15 / 255));
  --tone-raised-a179: rgb(from var(--role-raised) r g b / calc(179 / 255));
  --tone-violet-shade-a46: rgb(from var(--color-violet-shade) r g b / calc(46 / 255));
  --tone-jet-a31: rgb(from var(--color-jet) r g b / calc(31 / 255));
  --tone-jet-a13: rgb(from var(--color-jet) r g b / calc(13 / 255));
  --tone-ink-a18: rgb(from var(--role-ink) r g b / calc(18 / 255));
  --tone-ink-84-ink-muted: color-mix(in srgb, var(--role-ink) 84%, var(--role-ink-muted));
  --tone-overlay-92: color-mix(in srgb, var(--role-overlay) 92%, transparent);
  --tone-on-photo-a31: rgb(from var(--role-on-photo) r g b / calc(31 / 255));
  --tone-on-photo-a61: rgb(from var(--role-on-photo) r g b / calc(61 / 255));
  --tone-on-photo-a41: rgb(from var(--role-on-photo) r g b / calc(41 / 255));
  --tone-on-photo-a71: rgb(from var(--role-on-photo) r g b / calc(71 / 255));
  --tone-on-photo-60: rgb(from var(--role-on-photo) r g b / 60%);
  --tone-overlay-a56: rgb(from var(--role-overlay) r g b / calc(56 / 255));
  --tone-overlay-40: rgb(from var(--role-overlay) r g b / 40%);
}

/* 4b. Photo areas: text inside that reads the page colour reads Text on photos instead (same colour in Original) */
.glass-card_component,
.section_dark {
  --role-page: var(--color-paper);
  --role-raised: var(--role-on-photo);
  --tone-page-65-raised: color-mix(in srgb, var(--role-page) 65%, var(--role-raised));
  --tone-page-a235: rgb(from var(--role-page) r g b / calc(235 / 255));
  --tone-page-a140: rgb(from var(--role-page) r g b / calc(140 / 255));
  --tone-raised-57-page: color-mix(in srgb, var(--role-raised) 57%, var(--role-page));
  --button-primary-text: var(--role-raised-outer);
  --button-inverse-bg: var(--role-raised-outer);
}
:root,
[data-theme] {
  --role-raised-outer: var(--role-raised);
}
:root,
[data-theme] {
  --role-page-outer: var(--role-page);
}
.glass-card_component :is(input, select, textarea),
.section_dark :is(input, select, textarea) {
  --role-page: var(--role-page-outer);
  --role-raised: var(--role-raised-outer);
}

/* 5. Fonts */
:root {
  --font-heading: Geist, sans-serif;
  --font-body: Geist, sans-serif;
  --font-label: "Geist Mono", monospace;
}

/* 6. Text sizes: three scales (S 0.9, M 1, L 1.1). Every font size is a size token times its scale.
   Tokens keep the unit of the value they replace: px by number (--size-14), other units in the name (--size-1-25rem). */
:root {
  --scale-headings: 1;
  --scale-body: 1;
  --scale-labels: 1;
  --size-h1: 3.25rem;
  --size-h2: 2.25rem;
  --size-h3: 1.75rem;
  --size-h4: 1.375rem;
  --size-h5: 1.125rem;
  --size-h6: .9375rem;
  --size-display: 4rem;
  --size-number: 2.5rem;
  --size-body-medium: .875rem;
  --size-fixed-44-8: 2.8rem;
  --size-fixed-13: .8125rem;
  --size-body-large: 1rem;
  --size-body-tiny: .75rem;
  --size-fixed-20: 1.25rem;
  --size-body-small: .8125rem;
  --size-fixed-40: 2.5rem;
  --size-input: .875rem;
  --size-fixed-18: 1.125rem;
  --size-fixed-36: 2.25rem;
  --size-fixed-32: 2rem;
  --size-fixed-28: 1.75rem;
  --size-body-compact: .875rem;
  --size-card-title: 1.125rem;
  --size-feature-title: 1.625rem;
  --size-fixed-10: .625rem;
  --size-fixed-104: 6.5rem;
  --size-fixed-11: .6875rem;
  --size-fixed-112: 7rem;
  --size-fixed-15: .9375rem;
  --size-fixed-17: 1.0625rem;
  --size-fixed-19: 1.1875rem;
  --size-fixed-22: 1.375rem;
  --size-fixed-24: 1.5rem;
  --size-fixed-26: 1.625rem;
  --size-fixed-30: 1.875rem;
  --size-fixed-34: 2.125rem;
  --size-fixed-44: 2.75rem;
  --size-fixed-48: 3rem;
  --size-fixed-52: 3.25rem;
  --size-fixed-56: 3.5rem;
  --size-fixed-60: 3.75rem;
  --size-fixed-64: 4rem;
  --size-fixed-72: 4.5rem;
  --size-fixed-80: 5rem;
  --size-fixed-88: 5.5rem;
  --size-fixed-9: .5625rem;
  --size-hero: 4rem;
  --size-lead: 1.125rem;
  --size-micro-label: .75rem;
  --size-mono-small: .75rem;
  --size-page-title: 4.5rem;
  --size-parent: 1em;
  --size-section-title: 2.5rem;
  --size-stat-label: .875rem;
  --size-statement: 3rem;
  --size-tag-label: .875rem;
  --size-fixed-46: 2.875rem;
  --size-badge: .6875rem;
  --size-button-normal: .875rem;
  --size-button-small: .875rem;
  --size-16: 16px;
  --size-14: 14px;
  --size-0-875rem: .875rem;
  --size-2-5rem: 2.5rem;
  --leading-body-medium: 150%;
  --leading-h1: 106%;
  --leading-h2: 118%;
  --leading-h3: 120%;
  --leading-h4: 130%;
  --leading-h5: 135%;
  --leading-h6: 145%;
  --leading-ratio-175: 1.75;
  --leading-body-large: 150%;
  --leading-body-tiny: 150%;
  --leading-badge: 130%;
  --leading-ratio-155: 1.55;
  --leading-percent-150: 150%;
  --leading-button-small: 155%;
  --leading-body-small: 150%;
  --leading-display: 104%;
  --leading-ratio-110: 1.1;
  --leading-ratio-130: 1.3;
  --leading-ratio-140: 1.4;
  --leading-button-normal: 155%;
  --leading-ratio-100: 1;
  --leading-fixed-16: 16px;
  --leading-fixed-22: 22px;
  --leading-fixed-24: 24px;
  --leading-ratio-80: .8;
  --leading-ratio-104: 1.04;
  --leading-ratio-105: 1.05;
  --leading-ratio-112: 1.12;
  --leading-ratio-115: 1.15;
  --leading-ratio-120: 1.2;
  --leading-ratio-125: 1.25;
  --leading-ratio-135: 1.35;
  --leading-ratio-150: 1.5;
  --leading-ratio-160: 1.6;
  --leading-ratio-170: 1.7;
  --leading-135: 1.35;
  --leading-100: 1;
  --tracking-tight-1: -.01em;
  --tracking-tight-0-5: -.005em;
  --tracking-tight-2: -.02em;
  --tracking-tight-1-5: -.015em;
  --tracking-none: 0em;
  --tracking-wide-8: .08em;
  --tracking-tight-3: -.03em;
  --tracking-tight-2-5: -.025em;
  --tracking-tight-4: -.04em;
  --tracking-tight-0-27-px: -.27px;
  --tracking-tight-0-21-px: -.21px;
  --tracking-tight-0-24-px: -.24px;
  --tracking-tight-0-33-px: -.33px;
  --tracking-tight-0-5-px: -.5px;
  --tracking-tight-0-64-px: -.64px;
  --tracking-tight-0-85-px: -.85px;
  --tracking-tight-1-px: -1px;
  --tracking-tight-1-4-px: -1.4px;
  --tracking-tight-1-92-px: -1.92px;
  --tracking-tight-2-px: -2px;
  --tracking-tight-2-52-px: -2.52px;
  --tracking-tight-3-5: -.035em;
  --tracking-tight-6: -.06em;
  --tracking-wide-0-2-px: .2px;
  --tracking-wide-0-22-px: .22px;
  --tracking-wide-0-4-px: .4px;
  --tracking-wide-2: .02em;
  --tracking-wide-4: .04em;
  --tracking-wide-6: .06em;
}

/* 7. Spacing: 4px base. Values off the 4px grid keep their own token; rem values keep rem. */
:root {
  --container-width: 1040px;
  --section-spacing: 1;
  --section-padding-large: 120px;
  --section-padding-medium: 96px;
  --section-padding-small: 48px;
  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-3: 3px;
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-25: 25px;
  --spacing-26: 26px;
  --spacing-28: 28px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-42: 42px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-60: 60px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-88: 88px;
  --spacing-94: 94px;
  --spacing-96: 96px;
  --spacing-100: 100px;
  --spacing-110: 110px;
  --spacing-112: 112px;
  --spacing-118: 118px;
  --spacing-120: 120px;
  --spacing-126: 126px;
  --spacing-128: 128px;
  --spacing-134: 134px;
  --spacing-140: 140px;
  --spacing-142: 142px;
  --spacing-148: 148px;
  --spacing-150: 150px;
  --spacing-158: 158px;
  --spacing-160: 160px;
  --spacing-168: 168px;
  --spacing-172: 172px;
  --spacing-174: 174px;
  --spacing-180: 180px;
  --spacing-182: 182px;
  --spacing-188: 188px;
  --spacing-192: 192px;
  --spacing-198: 198px;
  --spacing-200: 200px;
  --spacing-204: 204px;
  --spacing-214: 214px;
  --spacing-218: 218px;
  --spacing-228: 228px;
  --spacing-520: 520px;
  --spacing-0-25em: .25em;
  --spacing-1-5rem: 1.5rem;
  --spacing-1-25rem: 1.25rem;
  --spacing-0-5rem: .5rem;
  --spacing-1rem: 1rem;
}

/* 7b. Breakpoint values for the role sizes, section paddings and other responsive tokens */
@media screen and (max-width: 991px) {
  :root {
    --size-h1: 2.75rem;
    --size-h2: 2rem;
    --size-h3: 1.625rem;
    --size-h4: 1.25rem;
    --size-display: 3.5rem;
    --size-number: 2.25rem;
    --size-hero: 3.5rem;
    --size-page-title: 4rem;
    --size-section-title: 2.125rem;
    --size-statement: 2.5rem;
    --section-padding-large: 96px;
    --section-padding-medium: 80px;
    --section-padding-small: 44px;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --size-h1: 2.5rem;
    --size-h2: 1.875rem;
    --size-h3: 1.5rem;
    --size-h4: 1.25rem;
    --size-display: 2.75rem;
    --size-number: 2rem;
    --size-input: 1rem;
    --size-feature-title: 1.375rem;
    --size-hero: 2.75rem;
    --size-lead: 1rem;
    --size-page-title: 3.25rem;
    --size-section-title: 1.875rem;
    --size-stat-label: .75rem;
    --size-statement: 2rem;
    --section-padding-large: 80px;
    --section-padding-medium: 64px;
    --section-padding-small: 40px;
  }
}
@media screen and (max-width: 479px) {
  :root {
    --size-h1: 2.25rem;
    --size-h2: 1.75rem;
    --size-h3: 1.375rem;
    --size-h4: 1.125rem;
    --size-display: 2.5rem;
    --size-number: 2rem;
    --size-input: 1rem;
    --size-body-compact: .8125rem;
    --size-card-title: 1rem;
    --size-feature-title: 1.375rem;
    --size-hero: 2.5rem;
    --size-lead: 1rem;
    --size-micro-label: .625rem;
    --size-mono-small: .6875rem;
    --size-page-title: 2.5rem;
    --size-section-title: 1.875rem;
    --size-stat-label: .75rem;
    --size-statement: 1.75rem;
    --size-tag-label: .75rem;
    --section-padding-large: 64px;
    --section-padding-medium: 56px;
    --section-padding-small: 32px;
  }
}

/* 8. Corners: every corner follows --radius-card in proportion. Pills follow --radius-button.
   rem corners are worked out in px from --radius-card (corners are not text, so they do not need to follow the browser font size). */
:root {
  --radius-card: 24px;
  --radius-button: 8px;
  --radius-pill: var(--radius-button);
  --radius-round: 999px;
  --radius-1: calc(var(--radius-card) * 1 / 24);
  --radius-2: calc(var(--radius-card) * 2 / 24);
  --radius-3: calc(var(--radius-card) * 3 / 24);
  --radius-4: calc(var(--radius-card) * 4 / 24);
  --radius-5: calc(var(--radius-card) * 5 / 24);
  --radius-6: calc(var(--radius-card) * 6 / 24);
  --radius-8: calc(var(--radius-card) * 8 / 24);
  --radius-10: calc(var(--radius-card) * 10 / 24);
  --radius-12: calc(var(--radius-card) * 12 / 24);
  --radius-14: calc(var(--radius-card) * 14 / 24);
  --radius-16: calc(var(--radius-card) * 16 / 24);
  --radius-20: calc(var(--radius-card) * 20 / 24);
  --radius-32: calc(var(--radius-card) * 32 / 24);
}

/* 9. Buttons: read-only, they follow the roles and --radius-button */
:root,
[data-theme] {
  --button-primary-bg: var(--role-ink);
  --button-primary-text: var(--role-raised);
  --button-primary-bg-hover: var(--role-ink-soft);
  --button-inverse-bg: var(--role-raised);
  --button-inverse-text: var(--role-ink);
  --button-inverse-bg-hover: var(--role-surface);
}

/* 10. Shadows and focus */
:root,
[data-theme] {
  --shadow-1: 0 0 3px 1px var(--role-accent);
  --shadow-2: 0 24px 48px var(--tone-jet-a15);
  --shadow-3: 0 8px 24px var(--tone-jet-a15);
  --shadow-4: 0 12px 32px var(--tone-jet-a20);
  --shadow-5: inset -4px -6px 14px var(--tone-raised-a179), 0 14px 28px -6px var(--tone-violet-shade-a46);
  --shadow-6: 0 16px 32px -8px var(--tone-jet-a31);
  --shadow-7: inset -6px -8px 18px var(--tone-raised-a140);
  --shadow-8: 0 12px 32px var(--tone-jet-a13);
  --shadow-9: 0 8px 24px var(--tone-jet-a20);
  --shadow-10: 0 16px 40px var(--tone-jet-a20);
  --focus-ring: var(--role-accent);
}

/* 11. Motion */
:root {
  --motion-fast: .2s;
  --motion-base: .3s;
  --motion-medium: .4s;
  --motion-slow: .6s;
  --ease-1: cubic-bezier(.22,.61,.36,1);
}

/* 12. Breakpoints (for reference; media queries cannot read custom properties)
   desktop: min-width 992px
   tablet: max-width 991px
   mobile-landscape: max-width 767px
   mobile: max-width 479px */