html { --width-full-card: calc(100% - 182px); --width-full-card-only-desktop: calc(100% - var(--space-m)); } @media (max-width: 1700px) { html { --width-full-card: calc(100% - var(--space-xl)); } } @media (max-width: 991px) { html { --width-full-card: calc(100% - var(--space-m)); } } html{ --bg-body-const :var(--bg-body); }  :root { --text-highlight: #ffdd57;  }  :root { --text-highlight: #ffdd57;  } @media(max-width:1024px){ h1, h2, h3, h4, h5, h6{ text-wrap:unset!important; } } section.has-bg-video .bricks-background-video-wrapper video{ width: 100vw!important; height: unset!important; } html,body { max-width: 100%; overflow-x: clip; } p strong,p b { font-weight: 600;  } h1 strong ,h1 b, h2 strong,h1 b, h3 strong, h3 b, h4 strong,h4 b, h5 strong,h5 b, h6 strong, h6 b{ font-weight: 800; } .cky-title,.cky-notice-des{ color: var(--primary-d-4)!important; } .cky-consent-bar{ background-color: var(--primary-l-4)!important; box-shadow:unset!important; } .cky-btn-accept{ background-color: var(--primary)!important; border-color: var(--primary)!important; } .cky-btn-reject{ color: var(--primary)!important; border-color: var(--primary)!important; } html { font-size: 62.5%; } html.cf-theme-dark { color-scheme: dark; } :root, :root.cf-theme-dark .theme-inverted, :root.cf-theme-dark .theme-always-light, :root.cf-theme-light .theme-inverted .theme-always-light { --min-screen-width: 320px; --max-screen-width: 1366px; --primary: #2364a9; --primary-5: #2364a90d; --primary-10: #2364a91a; --primary-20: #2364a933; --primary-30: #2364a94d; --primary-40: #2364a966; --primary-50: #2364a980; --primary-60: #2364a999; --primary-70: #2364a9b3; --primary-80: #2364a9cc; --primary-90: #2364a9e6; --primary-d-1: #235186; --primary-d-2: #1f3b61; --primary-d-3: #192a42; --primary-d-4: #121823; --primary-l-1: #5a80ba; --primary-l-2: #869ecb; --primary-l-3: #adbddc; --primary-l-4: #d8dfee; --secondary: #3fa6d9; --secondary-5: #3fa6d90d; --secondary-10: #3fa6d91a; --secondary-20: #3fa6d933; --secondary-30: #3fa6d94d; --secondary-40: #3fa6d966; --secondary-50: #3fa6d980; --secondary-60: #3fa6d999; --secondary-70: #3fa6d9b3; --secondary-80: #3fa6d9cc; --secondary-90: #3fa6d9e6; --secondary-d-1: #3783a9; --secondary-d-2: #2d607b; --secondary-d-3: #234152; --secondary-d-4: #17242b; --secondary-l-1: #70b7e1; --secondary-l-2: #96c7e8; --secondary-l-3: #bcdbf0; --secondary-l-4: #deedf8; --tertiary: #fec701; --tertiary-5: #fec7010d; --tertiary-10: #fec7011a; --tertiary-20: #fec70133; --tertiary-30: #fec7014d; --tertiary-40: #fec70166; --tertiary-50: #fec70180; --tertiary-60: #fec70199; --tertiary-70: #fec701b3; --tertiary-80: #fec701cc; --tertiary-90: #fec701e6; --tertiary-d-1: #c89e14; --tertiary-d-2: #917218; --tertiary-d-3: #604c16; --tertiary-d-4: #322811; --tertiary-l-1: #ffd152; --tertiary-l-2: #ffdd80; --tertiary-l-3: #ffe9ad; --tertiary-l-4: #fff3d6; --base: #161616; --base-5: #1616160d; --base-10: #1616161a; --base-20: #16161633; --base-30: #1616164d; --base-40: #16161666; --base-50: #16161680; --base-60: #16161699; --base-70: #161616b3; --base-80: #161616cc; --base-90: #161616e6; --base-d-1: #131313; --base-d-2: #0f0f0f; --base-d-3: #0b0b0b; --base-d-4: #050505; --base-l-1: #3d3d3d; --base-l-2: #696969; --base-l-3: #989898; --base-l-4: #cacaca; --bg-body: #e6e6e6; --bg-surface: #ffffff; --text-body: hsl(0, 0%, 25%); --text-title: hsl(0, 0%, 0%); --light: #ffffff; --light-5: #ffffff0d; --light-10: #ffffff1a; --light-20: #ffffff33; --light-30: #ffffff4d; --light-40: #ffffff66; --light-50: #ffffff80; --light-60: #ffffff99; --light-70: #ffffffb3; --light-80: #ffffffcc; --light-90: #ffffffe6; --dark: #000000; --dark-5: #0000000d; --dark-10: #0000001a; --dark-20: #00000033; --dark-30: #0000004d; --dark-40: #00000066; --dark-50: #00000080; --dark-60: #00000099; --dark-70: #000000b3; --dark-80: #000000cc; --dark-90: #000000e6; --success: hsl(136, 95%, 56%); --success-5: hsla(136, 95%, 56%, 0.05); --success-10: hsla(136, 95%, 56%, 0.1); --success-20: hsla(136, 95%, 56%, 0.2); --success-30: hsla(136, 95%, 56%, 0.3); --success-40: hsla(136, 95%, 56%, 0.4); --success-50: hsla(136, 95%, 56%, 0.5); --success-60: hsla(136, 95%, 56%, 0.6); --success-70: hsla(136, 95%, 56%, 0.7); --success-80: hsla(136, 95%, 56%, 0.8); --success-90: hsla(136, 95%, 56%, 0.9); --error: hsl(351, 95%, 56%); --error-5: hsla(351, 95%, 56%, 0.05); --error-10: hsla(351, 95%, 56%, 0.1); --error-20: hsla(351, 95%, 56%, 0.2); --error-30: hsla(351, 95%, 56%, 0.3); --error-40: hsla(351, 95%, 56%, 0.4); --error-50: hsla(351, 95%, 56%, 0.5); --error-60: hsla(351, 95%, 56%, 0.6); --error-70: hsla(351, 95%, 56%, 0.7); --error-80: hsla(351, 95%, 56%, 0.8); --error-90: hsla(351, 95%, 56%, 0.9); --space-4xs: clamp(0.52rem, calc(-0.03vw + 0.53rem), 0.49rem); --space-3xs: clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem); --space-2xs: clamp(0.82rem, calc(0.16vw + 0.77rem), 0.99rem); --space-xs: clamp(1.02rem, calc(0.36vw + 0.91rem), 1.4rem); --space-s: clamp(1.28rem, calc(0.67vw + 1.07rem), 1.98rem); --space-m: clamp(1.6rem, calc(1.15vw + 1.23rem), 2.8rem); --space-l: clamp(2rem, calc(1.87vw + 1.4rem), 3.96rem); --space-xl: clamp(2.5rem, calc(2.96vw + 1.55rem), 5.6rem); --space-2xl: clamp(3.13rem, calc(4.58vw + 1.66rem), 7.92rem); --space-3xl: clamp(3.91rem, calc(6.97vw + 1.68rem), 11.19rem); --space-4xl: clamp(4.88rem, calc(10.46vw + 1.53rem), 15.83rem); --text-xs: clamp(1.26rem, calc(-0.24vw + 1.34rem), 1.01rem); --text-s: clamp(1.42rem, calc(-0.07vw + 1.44rem), 1.35rem); --text-m: clamp(1.6rem, calc(0.19vw + 1.54rem), 1.8rem); --text-l: clamp(1.8rem, calc(0.57vw + 1.62rem), 2.4rem); --text-xl: clamp(2.02rem, calc(1.12vw + 1.67rem), 3.2rem); --text-2xl: clamp(2.28rem, calc(1.9vw + 1.67rem), 4.26rem); --text-3xl: clamp(2.56rem, calc(2.98vw + 1.61rem), 5.68rem); --text-4xl: clamp(2.88rem, calc(4.49vw + 1.45rem), 7.58rem); --columns-1: repeat(1, minmax(0, 1fr)); --columns-2: repeat(2, minmax(0, 1fr)); --columns-3: repeat(3, minmax(0, 1fr)); --columns-4: repeat(4, minmax(0, 1fr)); --columns-5: repeat(5, minmax(0, 1fr)); --columns-6: repeat(6, minmax(0, 1fr)); --columns-7: repeat(7, minmax(0, 1fr)); --columns-8: repeat(8, minmax(0, 1fr)); --columns-9: repeat(9, minmax(0, 1fr)); --columns-10: repeat(10, minmax(0, 1fr)); --columns-11: repeat(11, minmax(0, 1fr)); --columns-12: repeat(12, minmax(0, 1fr)); --radius-xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem); --radius-s: clamp(0.6rem, calc(-0.19vw + 0.86rem), 0.8rem); --radius-m: clamp(1rem, calc(-0.19vw + 1.26rem), 1.2rem); --radius-l: clamp(1.6rem, calc(-0.38vw + 2.12rem), 2rem); --radius-xl: clamp(2.6rem, calc(-0.57vw + 3.38rem), 3.2rem); --radius-full: 999rem; --shadow-xs: 0 1px 2px var(--shadow-primary); --shadow-s: 0 1.5px 3px var(--shadow-primary); --shadow-m: 0 2px 6px var(--shadow-primary); --shadow-l: 0 3px 12px var(--shadow-primary); --shadow-xl: 0 6px 48px var(--shadow-primary); } :root.cf-theme-dark, :root.cf-theme-light .theme-inverted, :root.cf-theme-light .theme-always-dark, :root.cf-theme-dark .theme-inverted .theme-always-dark { --primary: #123255; --primary-5: #1232550d; --primary-10: #1232551a; --primary-20: #12325533; --primary-30: #1232554d; --primary-40: #12325566; --primary-50: #12325580; --primary-60: #12325599; --primary-70: #123255b3; --primary-80: #123255cc; --primary-90: #123255e6; --base: #e6e6e6; --base-5: #e6e6e60d; --base-10: #e6e6e61a; --base-20: #e6e6e633; --base-30: #e6e6e64d; --base-40: #e6e6e666; --base-50: #e6e6e680; --base-60: #e6e6e699; --base-70: #e6e6e6b3; --base-80: #e6e6e6cc; --base-90: #e6e6e6e6; --base-d-1: #b3b3b3; --base-d-2: #828282; --base-d-3: #575757; --base-d-4: #2b2b2b; --base-l-1: #ebebeb; --base-l-2: #f0f0f0; --base-l-3: #f5f5f5; --base-l-4: #fafafa; --bg-body: hsla(0, 0%, 5%, 1); --bg-surface: hsla(0, 0%, 15%, 1); --text-body: #bfbfbf; --text-title: hsla(0, 0%, 100%, 1); --light: hsla(0, 0%, 0%, 1); --light-5: #0000000d; --light-10: #0000001a; --light-20: #00000033; --light-30: #0000004d; --light-40: #00000066; --light-50: #00000080; --light-60: #00000099; --light-70: #000000b3; --light-80: #000000cc; --light-90: #000000e6; --dark: hsla(0, 0%, 100%, 1); --dark-5: #ffffff0d; --dark-10: #ffffff1a; --dark-20: #ffffff33; --dark-30: #ffffff4d; --dark-40: #ffffff66; --dark-50: #ffffff80; --dark-60: #ffffff99; --dark-70: #ffffffb3; --dark-80: #ffffffcc; --dark-90: #ffffffe6; } .btn { display: flex; align-items: center; justify-content: center; gap: var(--space-3xs); padding: var(--space-xs) var(--space-s); background: var(--primary); color: #fff; font-size: var(--text-m); font-weight: 600; border-radius: var(--radius-m); border: 1px solid var(--primary-d-1); box-shadow: var(--shadow-m); transition: all 0.25s ease-in-out; outline: 0; cursor: pointer; } .btn:hover { background: var(--primary-d-1); transform: translateY(-0.1rem); } .btn.small { font-size: var(--text-s); padding: var(--space-xs) var(--space-s); } .btn.large { font-size: var(--text-l); padding: var(--space-s) var(--space-m); } .btn.tertiary { background: var(--tertiary); border-color: var(--tertiary-d-1); } .btn.ghost { color: var(--dark-80); background: transparent; border-color: transparent; box-shadow: none; } .btn.slight { color: var(--dark-80); background: var(--bg-surface); border-color: var(--border-primary); box-shadow: var(--shadow-s); } .btn.secondary { background: var(--secondary); border-color: var(--secondary-d-1); } .btn.ghost:hover { background: var(--dark-10); } .btn.slight:hover { background: var(--dark-5); } .btn.tertiary:hover { background: var(--tertiary-d-1); } .btn.secondary:hover { background: var(--secondary-d-1); } .btn:focus { outline: 4px solid var(--primary-l-3); outline-offset: 2px; } .btn.no-bg { color: var(--dark-80); background: transparent; box-shadow: none; border-color: transparent; } .btn.no-bg:hover { color: var(--dark); } .badge { display: flex; align-items: center; justify-content: center; gap: var(--space-4xs); padding: var(--space-2xs) var(--space-s); background: var(--dark-10); color: var(--primary); font-size: var(--text-s); font-weight: 500; border-radius: var(--radius-full); border: 0; outline: 0; } .badge.secondary { color: var(--secondary); } .link { color: var(--primary); font-size: var(--text-m); font-weight: 600; letter-spacing: 0.05rem; box-shadow: 0 2px 0 var(--primary-20); -webkit-text-decoration: none; text-decoration: none; transition: all 0.15s ease-in-out; } .link:hover { box-shadow: 0 2px 0 var(--primary-40); } .link:focus { background: var(--primary-10); } .link.secondary { color: var(--secondary); border-color: var(--secondary-20); } .link.tertiary { color: var(--tertiary); border-color: var(--tertiary-20); } .input { padding: var(--space-xs) var(--space-s); background: var(--dark-5); color: var(--text-title); font-size: var(--text-m); font-weight: 500; border-radius: var(--radius-m); border: 1px solid var(--border-primary); box-shadow: var(--shadow-xs); transition: all 0.25s ease-in-out; appearance: none; outline: 0; } .input:focus { background: var(--primary-20); border-color: var(--primary); box-shadow: var(--shadow-l); } .input:hover { border-color: var(--primary); background: transparent; box-shadow: var(--shadow-l); } .input::placeholder { color: var(--dark-40); } .input:invalid { border-color: var(--error); background: var(--error-10); } .input:disabled { cursor: not-allowed; opacity: .75; box-shadow: none; background: var(--dark-10); } .select { padding: var(--space-xs) var(--space-s); background: var(--dark-5); color: var(--text-body); font-size: var(--text-m); font-weight: 500; border-radius: var(--radius-m); border: 1px solid var(--border-primary); box-shadow: var(--shadow-xs); transition: all 0.25s ease-in-out; outline: 0; } .select:focus { background: var(--primary-20); border-color: var(--primary); } .select:hover { border-color: var(--primary); } .select::placeholder { color: var(--dark-40); } .select:invalid { border-color: var(--error); background: var(--error-10); } .select:disabled { cursor: not-allowed; opacity: .75; box-shadow: none; background: var(--dark-10); } .card { display: grid; gap: var(--space-xs); padding: var(--space-m); font-size: var(--text-m); color: var(--text-body); background: var(--bg-surface); line-height: 1.3; border-radius: var(--radius-m); box-shadow: var(--shadow-m); } .card.secondary { background: var(--secondary); color: #fff; } .card.primary { background: var(--primary); color: #fff; } .icon { color: var(--primary); width: var(--space-2xl); height: auto; font-size: var(--space-2xl); } .icon.large { width: var(--space-3xl); font-size: var(--space-3xl); } .icon.secondary { color: var(--secondary); } .icon.tertiary { color: var(--tertiary); } .icon.outline { padding: 0.5em; border: 1px solid var(--border-primary); border-radius: 100%; box-sizing: content-box; } .icon.filled { padding: 0.5em; border-radius: 100%; box-sizing: content-box; background: var(--dark-10); } .icon.small { width: var(--space-l); font-size: var(--space-l); } .avatar { width: var(--space-2xl); height: var(--space-2xl); border-radius: 100%; box-shadow: var(--shadow-m); object-fit: cover; } .avatar.small { width: var(--space-l); height: var(--space-l); } .avatar.large { width: var(--space-4xl); height: var(--space-4xl); } .divider { min-width: 100%; width: 100%; max-width: 100%; min-height: 1px; height: 1px; max-height: 1px; background: var(--border-primary); margin: var(--space-m) 0; border: 0; } .divider.vertical { min-width: 1px; width: 1px; max-width: 1px; min-height: 100%; height: 100%; max-height: 100%; } .checkbox { appearance: none; display: grid; place-content: center; border: 2px solid var(--dark-40); border-radius: var(--radius-s); width: clamp(1.8rem, calc(-0.38vw + 2.32rem), 2.2rem); height: clamp(1.8rem, calc(-0.38vw + 2.32rem), 2.2rem); } .checkbox:checked:before { transform: scale(1); } .checkbox::before { content: ""; width: 1em; height: 1em; box-shadow: inset 1em 1em #fff; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transition: transform 0.2s; } .checkbox:hover { border-color: var(--primary); } .checkbox:focus { outline: 3px solid var(--primary-l-3); outline-offset: 2px; } .checkbox:checked { background: var(--primary); border-color: var(--primary); } .radio { appearance: none; display: grid; place-content: center; border: 2px solid var(--dark-40); border-radius: var(--radius-full); width: clamp(1.8rem, calc(-0.38vw + 2.32rem), 2.2rem); height: clamp(1.8rem, calc(-0.38vw + 2.32rem), 2.2rem); } .radio:checked:before { transform: scale(1); } .radio::before { content: ""; width: 1em; height: 1em; border-radius: 100%; transform: scale(0); transition: transform 0.2s; background: var(--primary); } .radio:hover { border-color: var(--primary); } .radio:focus { outline: 3px solid var(--primary-l-3); outline-offset: 2px; } .radio:checked { border-color: var(--primary); } .bg-primary { background-color: var(--primary); } .bg-primary-5 { background-color: var(--primary-5); } .bg-primary-10 { background-color: var(--primary-10); } .bg-primary-20 { background-color: var(--primary-20); } .bg-primary-30 { background-color: var(--primary-30); } .bg-primary-40 { background-color: var(--primary-40); } .bg-primary-50 { background-color: var(--primary-50); } .bg-primary-60 { background-color: var(--primary-60); } .bg-primary-70 { background-color: var(--primary-70); } .bg-primary-80 { background-color: var(--primary-80); } .bg-primary-90 { background-color: var(--primary-90); } .bg-primary-d-1 { background-color: var(--primary-d-1); } .bg-primary-d-2 { background-color: var(--primary-d-2); } .bg-primary-d-3 { background-color: var(--primary-d-3); } .bg-primary-d-4 { background-color: var(--primary-d-4); } .bg-primary-l-1 { background-color: var(--primary-l-1); } .bg-primary-l-2 { background-color: var(--primary-l-2); } .bg-primary-l-3 { background-color: var(--primary-l-3); } .bg-primary-l-4 { background-color: var(--primary-l-4); } .text-primary { color: var(--primary); } .text-primary-5 { color: var(--primary-5); } .text-primary-10 { color: var(--primary-10); } .text-primary-20 { color: var(--primary-20); } .text-primary-30 { color: var(--primary-30); } .text-primary-40 { color: var(--primary-40); } .text-primary-50 { color: var(--primary-50); } .text-primary-60 { color: var(--primary-60); } .text-primary-70 { color: var(--primary-70); } .text-primary-80 { color: var(--primary-80); } .text-primary-90 { color: var(--primary-90); } .text-primary-d-1 { color: var(--primary-d-1); } .text-primary-d-2 { color: var(--primary-d-2); } .text-primary-d-3 { color: var(--primary-d-3); } .text-primary-d-4 { color: var(--primary-d-4); } .text-primary-l-1 { color: var(--primary-l-1); } .text-primary-l-2 { color: var(--primary-l-2); } .text-primary-l-3 { color: var(--primary-l-3); } .text-primary-l-4 { color: var(--primary-l-4); } .border-primary { border-color: var(--primary); } .border-primary-5 { border-color: var(--primary-5); } .border-primary-10 { border-color: var(--primary-10); } .border-primary-20 { border-color: var(--primary-20); } .border-primary-30 { border-color: var(--primary-30); } .border-primary-40 { border-color: var(--primary-40); } .border-primary-50 { border-color: var(--primary-50); } .border-primary-60 { border-color: var(--primary-60); } .border-primary-70 { border-color: var(--primary-70); } .border-primary-80 { border-color: var(--primary-80); } .border-primary-90 { border-color: var(--primary-90); } .border-primary-d-1 { border-color: var(--primary-d-1); } .border-primary-d-2 { border-color: var(--primary-d-2); } .border-primary-d-3 { border-color: var(--primary-d-3); } .border-primary-d-4 { border-color: var(--primary-d-4); } .border-primary-l-1 { border-color: var(--primary-l-1); } .border-primary-l-2 { border-color: var(--primary-l-2); } .border-primary-l-3 { border-color: var(--primary-l-3); } .border-primary-l-4 { border-color: var(--primary-l-4); } .bg-secondary { background-color: var(--secondary); } .bg-secondary-5 { background-color: var(--secondary-5); } .bg-secondary-10 { background-color: var(--secondary-10); } .bg-secondary-20 { background-color: var(--secondary-20); } .bg-secondary-30 { background-color: var(--secondary-30); } .bg-secondary-40 { background-color: var(--secondary-40); } .bg-secondary-50 { background-color: var(--secondary-50); } .bg-secondary-60 { background-color: var(--secondary-60); } .bg-secondary-70 { background-color: var(--secondary-70); } .bg-secondary-80 { background-color: var(--secondary-80); } .bg-secondary-90 { background-color: var(--secondary-90); } .bg-secondary-d-1 { background-color: var(--secondary-d-1); } .bg-secondary-d-2 { background-color: var(--secondary-d-2); } .bg-secondary-d-3 { background-color: var(--secondary-d-3); } .bg-secondary-d-4 { background-color: var(--secondary-d-4); } .bg-secondary-l-1 { background-color: var(--secondary-l-1); } .bg-secondary-l-2 { background-color: var(--secondary-l-2); } .bg-secondary-l-3 { background-color: var(--secondary-l-3); } .bg-secondary-l-4 { background-color: var(--secondary-l-4); } .text-secondary { color: var(--secondary); } .text-secondary-5 { color: var(--secondary-5); } .text-secondary-10 { color: var(--secondary-10); } .text-secondary-20 { color: var(--secondary-20); } .text-secondary-30 { color: var(--secondary-30); } .text-secondary-40 { color: var(--secondary-40); } .text-secondary-50 { color: var(--secondary-50); } .text-secondary-60 { color: var(--secondary-60); } .text-secondary-70 { color: var(--secondary-70); } .text-secondary-80 { color: var(--secondary-80); } .text-secondary-90 { color: var(--secondary-90); } .text-secondary-d-1 { color: var(--secondary-d-1); } .text-secondary-d-2 { color: var(--secondary-d-2); } .text-secondary-d-3 { color: var(--secondary-d-3); } .text-secondary-d-4 { color: var(--secondary-d-4); } .text-secondary-l-1 { color: var(--secondary-l-1); } .text-secondary-l-2 { color: var(--secondary-l-2); } .text-secondary-l-3 { color: var(--secondary-l-3); } .text-secondary-l-4 { color: var(--secondary-l-4); } .border-secondary { border-color: var(--secondary); } .border-secondary-5 { border-color: var(--secondary-5); } .border-secondary-10 { border-color: var(--secondary-10); } .border-secondary-20 { border-color: var(--secondary-20); } .border-secondary-30 { border-color: var(--secondary-30); } .border-secondary-40 { border-color: var(--secondary-40); } .border-secondary-50 { border-color: var(--secondary-50); } .border-secondary-60 { border-color: var(--secondary-60); } .border-secondary-70 { border-color: var(--secondary-70); } .border-secondary-80 { border-color: var(--secondary-80); } .border-secondary-90 { border-color: var(--secondary-90); } .border-secondary-d-1 { border-color: var(--secondary-d-1); } .border-secondary-d-2 { border-color: var(--secondary-d-2); } .border-secondary-d-3 { border-color: var(--secondary-d-3); } .border-secondary-d-4 { border-color: var(--secondary-d-4); } .border-secondary-l-1 { border-color: var(--secondary-l-1); } .border-secondary-l-2 { border-color: var(--secondary-l-2); } .border-secondary-l-3 { border-color: var(--secondary-l-3); } .border-secondary-l-4 { border-color: var(--secondary-l-4); } .bg-tertiary { background-color: var(--tertiary); } .bg-tertiary-5 { background-color: var(--tertiary-5); } .bg-tertiary-10 { background-color: var(--tertiary-10); } .bg-tertiary-20 { background-color: var(--tertiary-20); } .bg-tertiary-30 { background-color: var(--tertiary-30); } .bg-tertiary-40 { background-color: var(--tertiary-40); } .bg-tertiary-50 { background-color: var(--tertiary-50); } .bg-tertiary-60 { background-color: var(--tertiary-60); } .bg-tertiary-70 { background-color: var(--tertiary-70); } .bg-tertiary-80 { background-color: var(--tertiary-80); } .bg-tertiary-90 { background-color: var(--tertiary-90); } .bg-tertiary-d-1 { background-color: var(--tertiary-d-1); } .bg-tertiary-d-2 { background-color: var(--tertiary-d-2); } .bg-tertiary-d-3 { background-color: var(--tertiary-d-3); } .bg-tertiary-d-4 { background-color: var(--tertiary-d-4); } .bg-tertiary-l-1 { background-color: var(--tertiary-l-1); } .bg-tertiary-l-2 { background-color: var(--tertiary-l-2); } .bg-tertiary-l-3 { background-color: var(--tertiary-l-3); } .bg-tertiary-l-4 { background-color: var(--tertiary-l-4); } .text-tertiary { color: var(--tertiary); } .text-tertiary-5 { color: var(--tertiary-5); } .text-tertiary-10 { color: var(--tertiary-10); } .text-tertiary-20 { color: var(--tertiary-20); } .text-tertiary-30 { color: var(--tertiary-30); } .text-tertiary-40 { color: var(--tertiary-40); } .text-tertiary-50 { color: var(--tertiary-50); } .text-tertiary-60 { color: var(--tertiary-60); } .text-tertiary-70 { color: var(--tertiary-70); } .text-tertiary-80 { color: var(--tertiary-80); } .text-tertiary-90 { color: var(--tertiary-90); } .text-tertiary-d-1 { color: var(--tertiary-d-1); } .text-tertiary-d-2 { color: var(--tertiary-d-2); } .text-tertiary-d-3 { color: var(--tertiary-d-3); } .text-tertiary-d-4 { color: var(--tertiary-d-4); } .text-tertiary-l-1 { color: var(--tertiary-l-1); } .text-tertiary-l-2 { color: var(--tertiary-l-2); } .text-tertiary-l-3 { color: var(--tertiary-l-3); } .text-tertiary-l-4 { color: var(--tertiary-l-4); } .border-tertiary { border-color: var(--tertiary); } .border-tertiary-5 { border-color: var(--tertiary-5); } .border-tertiary-10 { border-color: var(--tertiary-10); } .border-tertiary-20 { border-color: var(--tertiary-20); } .border-tertiary-30 { border-color: var(--tertiary-30); } .border-tertiary-40 { border-color: var(--tertiary-40); } .border-tertiary-50 { border-color: var(--tertiary-50); } .border-tertiary-60 { border-color: var(--tertiary-60); } .border-tertiary-70 { border-color: var(--tertiary-70); } .border-tertiary-80 { border-color: var(--tertiary-80); } .border-tertiary-90 { border-color: var(--tertiary-90); } .border-tertiary-d-1 { border-color: var(--tertiary-d-1); } .border-tertiary-d-2 { border-color: var(--tertiary-d-2); } .border-tertiary-d-3 { border-color: var(--tertiary-d-3); } .border-tertiary-d-4 { border-color: var(--tertiary-d-4); } .border-tertiary-l-1 { border-color: var(--tertiary-l-1); } .border-tertiary-l-2 { border-color: var(--tertiary-l-2); } .border-tertiary-l-3 { border-color: var(--tertiary-l-3); } .border-tertiary-l-4 { border-color: var(--tertiary-l-4); } .bg-body { background-color: var(--bg-body); } .bg-surface { background-color: var(--bg-surface); } .text-body { color: var(--text-body); } .text-title { color: var(--text-title); } .bg-light { background-color: var(--light); } .bg-light-5 { background-color: var(--light-5); } .bg-light-10 { background-color: var(--light-10); } .bg-light-20 { background-color: var(--light-20); } .bg-light-30 { background-color: var(--light-30); } .bg-light-40 { background-color: var(--light-40); } .bg-light-50 { background-color: var(--light-50); } .bg-light-60 { background-color: var(--light-60); } .bg-light-70 { background-color: var(--light-70); } .bg-light-80 { background-color: var(--light-80); } .bg-light-90 { background-color: var(--light-90); } .text-light { color: var(--light); } .text-light-5 { color: var(--light-5); } .text-light-10 { color: var(--light-10); } .text-light-20 { color: var(--light-20); } .text-light-30 { color: var(--light-30); } .text-light-40 { color: var(--light-40); } .text-light-50 { color: var(--light-50); } .text-light-60 { color: var(--light-60); } .text-light-70 { color: var(--light-70); } .text-light-80 { color: var(--light-80); } .text-light-90 { color: var(--light-90); } .border-light { border-color: var(--light); } .border-light-5 { border-color: var(--light-5); } .border-light-10 { border-color: var(--light-10); } .border-light-20 { border-color: var(--light-20); } .border-light-30 { border-color: var(--light-30); } .border-light-40 { border-color: var(--light-40); } .border-light-50 { border-color: var(--light-50); } .border-light-60 { border-color: var(--light-60); } .border-light-70 { border-color: var(--light-70); } .border-light-80 { border-color: var(--light-80); } .border-light-90 { border-color: var(--light-90); } .bg-dark { background-color: var(--dark); } .bg-dark-5 { background-color: var(--dark-5); } .bg-dark-10 { background-color: var(--dark-10); } .bg-dark-20 { background-color: var(--dark-20); } .bg-dark-30 { background-color: var(--dark-30); } .bg-dark-40 { background-color: var(--dark-40); } .bg-dark-50 { background-color: var(--dark-50); } .bg-dark-60 { background-color: var(--dark-60); } .bg-dark-70 { background-color: var(--dark-70); } .bg-dark-80 { background-color: var(--dark-80); } .bg-dark-90 { background-color: var(--dark-90); } .text-dark { color: var(--dark); } .text-dark-5 { color: var(--dark-5); } .text-dark-10 { color: var(--dark-10); } .text-dark-20 { color: var(--dark-20); } .text-dark-30 { color: var(--dark-30); } .text-dark-40 { color: var(--dark-40); } .text-dark-50 { color: var(--dark-50); } .text-dark-60 { color: var(--dark-60); } .text-dark-70 { color: var(--dark-70); } .text-dark-80 { color: var(--dark-80); } .text-dark-90 { color: var(--dark-90); } .border-dark { border-color: var(--dark); } .border-dark-5 { border-color: var(--dark-5); } .border-dark-10 { border-color: var(--dark-10); } .border-dark-20 { border-color: var(--dark-20); } .border-dark-30 { border-color: var(--dark-30); } .border-dark-40 { border-color: var(--dark-40); } .border-dark-50 { border-color: var(--dark-50); } .border-dark-60 { border-color: var(--dark-60); } .border-dark-70 { border-color: var(--dark-70); } .border-dark-80 { border-color: var(--dark-80); } .border-dark-90 { border-color: var(--dark-90); } .bg-success { background-color: var(--success); } .bg-success-5 { background-color: var(--success-5); } .bg-success-10 { background-color: var(--success-10); } .bg-success-20 { background-color: var(--success-20); } .bg-success-30 { background-color: var(--success-30); } .bg-success-40 { background-color: var(--success-40); } .bg-success-50 { background-color: var(--success-50); } .bg-success-60 { background-color: var(--success-60); } .bg-success-70 { background-color: var(--success-70); } .bg-success-80 { background-color: var(--success-80); } .bg-success-90 { background-color: var(--success-90); } .text-success { color: var(--success); } .text-success-5 { color: var(--success-5); } .text-success-10 { color: var(--success-10); } .text-success-20 { color: var(--success-20); } .text-success-30 { color: var(--success-30); } .text-success-40 { color: var(--success-40); } .text-success-50 { color: var(--success-50); } .text-success-60 { color: var(--success-60); } .text-success-70 { color: var(--success-70); } .text-success-80 { color: var(--success-80); } .text-success-90 { color: var(--success-90); } .border-success { border-color: var(--success); } .border-success-5 { border-color: var(--success-5); } .border-success-10 { border-color: var(--success-10); } .border-success-20 { border-color: var(--success-20); } .border-success-30 { border-color: var(--success-30); } .border-success-40 { border-color: var(--success-40); } .border-success-50 { border-color: var(--success-50); } .border-success-60 { border-color: var(--success-60); } .border-success-70 { border-color: var(--success-70); } .border-success-80 { border-color: var(--success-80); } .border-success-90 { border-color: var(--success-90); } .bg-error { background-color: var(--error); } .bg-error-5 { background-color: var(--error-5); } .bg-error-10 { background-color: var(--error-10); } .bg-error-20 { background-color: var(--error-20); } .bg-error-30 { background-color: var(--error-30); } .bg-error-40 { background-color: var(--error-40); } .bg-error-50 { background-color: var(--error-50); } .bg-error-60 { background-color: var(--error-60); } .bg-error-70 { background-color: var(--error-70); } .bg-error-80 { background-color: var(--error-80); } .bg-error-90 { background-color: var(--error-90); } .text-error { color: var(--error); } .text-error-5 { color: var(--error-5); } .text-error-10 { color: var(--error-10); } .text-error-20 { color: var(--error-20); } .text-error-30 { color: var(--error-30); } .text-error-40 { color: var(--error-40); } .text-error-50 { color: var(--error-50); } .text-error-60 { color: var(--error-60); } .text-error-70 { color: var(--error-70); } .text-error-80 { color: var(--error-80); } .text-error-90 { color: var(--error-90); } .border-error { border-color: var(--error); } .border-error-5 { border-color: var(--error-5); } .border-error-10 { border-color: var(--error-10); } .border-error-20 { border-color: var(--error-20); } .border-error-30 { border-color: var(--error-30); } .border-error-40 { border-color: var(--error-40); } .border-error-50 { border-color: var(--error-50); } .border-error-60 { border-color: var(--error-60); } .border-error-70 { border-color: var(--error-70); } .border-error-80 { border-color: var(--error-80); } .border-error-90 { border-color: var(--error-90); } .padding-4xs { padding: var(--space-4xs); } .padding-3xs { padding: var(--space-3xs); } .padding-2xs { padding: var(--space-2xs); } .padding-xs { padding: var(--space-xs); } .padding-s { padding: var(--space-s); } .padding-m { padding: var(--space-m); } .padding-l { padding: var(--space-l); } .padding-xl { padding: var(--space-xl); } .padding-2xl { padding: var(--space-2xl); } .padding-3xl { padding: var(--space-3xl); } .padding-4xl { padding: var(--space-4xl); } .padding-left-4xs { padding-left: var(--space-4xs); } .padding-left-3xs { padding-left: var(--space-3xs); } .padding-left-2xs { padding-left: var(--space-2xs); } .padding-left-xs { padding-left: var(--space-xs); } .padding-left-s { padding-left: var(--space-s); } .padding-left-m { padding-left: var(--space-m); } .padding-left-l { padding-left: var(--space-l); } .padding-left-xl { padding-left: var(--space-xl); } .padding-left-2xl { padding-left: var(--space-2xl); } .padding-left-3xl { padding-left: var(--space-3xl); } .padding-left-4xl { padding-left: var(--space-4xl); } .padding-right-4xs { padding-right: var(--space-4xs); } .padding-right-3xs { padding-right: var(--space-3xs); } .padding-right-2xs { padding-right: var(--space-2xs); } .padding-right-xs { padding-right: var(--space-xs); } .padding-right-s { padding-right: var(--space-s); } .padding-right-m { padding-right: var(--space-m); } .padding-right-l { padding-right: var(--space-l); } .padding-right-xl { padding-right: var(--space-xl); } .padding-right-2xl { padding-right: var(--space-2xl); } .padding-right-3xl { padding-right: var(--space-3xl); } .padding-right-4xl { padding-right: var(--space-4xl); } .padding-top-4xs { padding-top: var(--space-4xs); } .padding-top-3xs { padding-top: var(--space-3xs); } .padding-top-2xs { padding-top: var(--space-2xs); } .padding-top-xs { padding-top: var(--space-xs); } .padding-top-s { padding-top: var(--space-s); } .padding-top-m { padding-top: var(--space-m); } .padding-top-l { padding-top: var(--space-l); } .padding-top-xl { padding-top: var(--space-xl); } .padding-top-2xl { padding-top: var(--space-2xl); } .padding-top-3xl { padding-top: var(--space-3xl); } .padding-top-4xl { padding-top: var(--space-4xl); } .padding-bottom-4xs { padding-bottom: var(--space-4xs); } .padding-bottom-3xs { padding-bottom: var(--space-3xs); } .padding-bottom-2xs { padding-bottom: var(--space-2xs); } .padding-bottom-xs { padding-bottom: var(--space-xs); } .padding-bottom-s { padding-bottom: var(--space-s); } .padding-bottom-m { padding-bottom: var(--space-m); } .padding-bottom-l { padding-bottom: var(--space-l); } .padding-bottom-xl { padding-bottom: var(--space-xl); } .padding-bottom-2xl { padding-bottom: var(--space-2xl); } .padding-bottom-3xl { padding-bottom: var(--space-3xl); } .padding-bottom-4xl { padding-bottom: var(--space-4xl); } .padding-horizontal-4xs { padding-left: var(--space-4xs); padding-right: var(--space-4xs); } .padding-horizontal-3xs { padding-left: var(--space-3xs); padding-right: var(--space-3xs); } .padding-horizontal-2xs { padding-left: var(--space-2xs); padding-right: var(--space-2xs); } .padding-horizontal-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); } .padding-horizontal-s { padding-left: var(--space-s); padding-right: var(--space-s); } .padding-horizontal-m { padding-left: var(--space-m); padding-right: var(--space-m); } .padding-horizontal-l { padding-left: var(--space-l); padding-right: var(--space-l); } .padding-horizontal-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); } .padding-horizontal-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); } .padding-horizontal-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); } .padding-horizontal-4xl { padding-left: var(--space-4xl); padding-right: var(--space-4xl); } .padding-vertical-4xs { padding-top: var(--space-4xs); padding-bottom: var(--space-4xs); } .padding-vertical-3xs { padding-top: var(--space-3xs); padding-bottom: var(--space-3xs); } .padding-vertical-2xs { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs); } .padding-vertical-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); } .padding-vertical-s { padding-top: var(--space-s); padding-bottom: var(--space-s); } .padding-vertical-m { padding-top: var(--space-m); padding-bottom: var(--space-m); } .padding-vertical-l { padding-top: var(--space-l); padding-bottom: var(--space-l); } .padding-vertical-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } .padding-vertical-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); } .padding-vertical-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); } .padding-vertical-4xl { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); } .margin-4xs { margin: var(--space-4xs); } .margin-3xs { margin: var(--space-3xs); } .margin-2xs { margin: var(--space-2xs); } .margin-xs { margin: var(--space-xs); } .margin-s { margin: var(--space-s); } .margin-m { margin: var(--space-m); } .margin-l { margin: var(--space-l); } .margin-xl { margin: var(--space-xl); } .margin-2xl { margin: var(--space-2xl); } .margin-3xl { margin: var(--space-3xl); } .margin-4xl { margin: var(--space-4xl); } .margin-left-4xs { margin-left: var(--space-4xs); } .margin-left-3xs { margin-left: var(--space-3xs); } .margin-left-2xs { margin-left: var(--space-2xs); } .margin-left-xs { margin-left: var(--space-xs); } .margin-left-s { margin-left: var(--space-s); } .margin-left-m { margin-left: var(--space-m); } .margin-left-l { margin-left: var(--space-l); } .margin-left-xl { margin-left: var(--space-xl); } .margin-left-2xl { margin-left: var(--space-2xl); } .margin-left-3xl { margin-left: var(--space-3xl); } .margin-left-4xl { margin-left: var(--space-4xl); } .margin-right-4xs { margin-right: var(--space-4xs); } .margin-right-3xs { margin-right: var(--space-3xs); } .margin-right-2xs { margin-right: var(--space-2xs); } .margin-right-xs { margin-right: var(--space-xs); } .margin-right-s { margin-right: var(--space-s); } .margin-right-m { margin-right: var(--space-m); } .margin-right-l { margin-right: var(--space-l); } .margin-right-xl { margin-right: var(--space-xl); } .margin-right-2xl { margin-right: var(--space-2xl); } .margin-right-3xl { margin-right: var(--space-3xl); } .margin-right-4xl { margin-right: var(--space-4xl); } .margin-top-4xs { margin-top: var(--space-4xs); } .margin-top-3xs { margin-top: var(--space-3xs); } .margin-top-2xs { margin-top: var(--space-2xs); } .margin-top-xs { margin-top: var(--space-xs); } .margin-top-s { margin-top: var(--space-s); } .margin-top-m { margin-top: var(--space-m); } .margin-top-l { margin-top: var(--space-l); } .margin-top-xl { margin-top: var(--space-xl); } .margin-top-2xl { margin-top: var(--space-2xl); } .margin-top-3xl { margin-top: var(--space-3xl); } .margin-top-4xl { margin-top: var(--space-4xl); } .margin-bottom-4xs { margin-bottom: var(--space-4xs); } .margin-bottom-3xs { margin-bottom: var(--space-3xs); } .margin-bottom-2xs { margin-bottom: var(--space-2xs); } .margin-bottom-xs { margin-bottom: var(--space-xs); } .margin-bottom-s { margin-bottom: var(--space-s); } .margin-bottom-m { margin-bottom: var(--space-m); } .margin-bottom-l { margin-bottom: var(--space-l); } .margin-bottom-xl { margin-bottom: var(--space-xl); } .margin-bottom-2xl { margin-bottom: var(--space-2xl); } .margin-bottom-3xl { margin-bottom: var(--space-3xl); } .margin-bottom-4xl { margin-bottom: var(--space-4xl); } .margin-horizontal-4xs { margin-left: var(--space-4xs); margin-right: var(--space-4xs); } .margin-horizontal-3xs { margin-left: var(--space-3xs); margin-right: var(--space-3xs); } .margin-horizontal-2xs { margin-left: var(--space-2xs); margin-right: var(--space-2xs); } .margin-horizontal-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); } .margin-horizontal-s { margin-left: var(--space-s); margin-right: var(--space-s); } .margin-horizontal-m { margin-left: var(--space-m); margin-right: var(--space-m); } .margin-horizontal-l { margin-left: var(--space-l); margin-right: var(--space-l); } .margin-horizontal-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); } .margin-horizontal-2xl { margin-left: var(--space-2xl); margin-right: var(--space-2xl); } .margin-horizontal-3xl { margin-left: var(--space-3xl); margin-right: var(--space-3xl); } .margin-horizontal-4xl { margin-left: var(--space-4xl); margin-right: var(--space-4xl); } .margin-vertical-4xs { margin-top: var(--space-4xs); margin-bottom: var(--space-4xs); } .margin-vertical-3xs { margin-top: var(--space-3xs); margin-bottom: var(--space-3xs); } .margin-vertical-2xs { margin-top: var(--space-2xs); margin-bottom: var(--space-2xs); } .margin-vertical-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); } .margin-vertical-s { margin-top: var(--space-s); margin-bottom: var(--space-s); } .margin-vertical-m { margin-top: var(--space-m); margin-bottom: var(--space-m); } .margin-vertical-l { margin-top: var(--space-l); margin-bottom: var(--space-l); } .margin-vertical-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); } .margin-vertical-2xl { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); } .margin-vertical-3xl { margin-top: var(--space-3xl); margin-bottom: var(--space-3xl); } .margin-vertical-4xl { margin-top: var(--space-4xl); margin-bottom: var(--space-4xl); } .gap-4xs { gap: var(--space-4xs); } .gap-3xs { gap: var(--space-3xs); } .gap-2xs { gap: var(--space-2xs); } .gap-xs { gap: var(--space-xs); } .gap-s { gap: var(--space-s); } .gap-m { gap: var(--space-m); } .gap-l { gap: var(--space-l); } .gap-xl { gap: var(--space-xl); } .gap-2xl { gap: var(--space-2xl); } .gap-3xl { gap: var(--space-3xl); } .gap-4xl { gap: var(--space-4xl); } .text-xs { font-size: var(--text-xs); } .text-s { font-size: var(--text-s); } .text-m { font-size: var(--text-m); } .text-l { font-size: var(--text-l); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .text-3xl { font-size: var(--text-3xl); } .text-4xl { font-size: var(--text-4xl); } H1 { font-size: var(--text-4xl); line-height: 1.1; } H2 { font-size: var(--text-3xl); line-height: 1.2; } H3 { font-size: var(--text-2xl); line-height: 1.3; } H4 { font-size: var(--text-xl); line-height: 1.3; } H5 { font-size: var(--text-l); line-height: 1.3; } H6 { font-size: var(--text-m); line-height: 1.4; } .line-height-xs { line-height: 1; } .line-height-s { line-height: 1.2; } .line-height-m { line-height: 1.3; } .line-height-l { line-height: 1.4; } .line-height-xl { line-height: 1.5; } .italic { font-style: italic; } .bold { font-weight: bold; } .lowercase { text-transform: lowercase; } .uppercase { text-transform: uppercase; } .underline { -webkit-text-decoration: underline; text-decoration: underline; } .font-100 { font-weight: 100; } .font-200 { font-weight: 200; } .font-300 { font-weight: 300; } .font-400 { font-weight: 400; } .font-500 { font-weight: 500; } .font-600 { font-weight: 600; } .font-700 { font-weight: 700; } .font-800 { font-weight: 800; } .font-900 { font-weight: 900; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .row { display: grid; grid-auto-flow: column; justify-content: start; } .column { display: grid; grid-auto-flow: row; justify-items: start; align-content: start; } .columns-2 { display: grid; grid-template-columns: 1fr 1fr; } .columns-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; } .columns-4 { display: grid; grid-template-columns: repeat(4,1fr); } .columns-5 { display: grid; grid-template-columns: repeat(5,1fr); } .columns-6 { display: grid; grid-template-columns: repeat(6,1fr); } .columns-7 { display: grid; grid-template-columns: repeat(7,1fr); } .columns-8 { display: grid; grid-template-columns: repeat(8,1fr); } .columns-min-5 { display: grid; grid-template-columns: repeat(auto-fit,minmax(5rem, 1fr)); } .columns-min-10 { display: grid; grid-template-columns: repeat(auto-fit,minmax(10rem, 1fr)); } .columns-min-20 { display: grid; grid-template-columns: repeat(auto-fit,minmax(20rem, 1fr)); } .columns-min-30 { display: grid; grid-template-columns: repeat(auto-fit,minmax(30rem, 1fr)); } .columns-min-40 { display: grid; grid-template-columns: repeat(auto-fit,minmax(40rem, 1fr)); } .columns-min-50 { display: grid; grid-template-columns: repeat(auto-fit,minmax(50rem, 1fr)); } .columns-min-60 { display: grid; grid-template-columns: repeat(auto-fit,minmax(60rem, 1fr)); } .columns-min-70 { display: grid; grid-template-columns: repeat(auto-fit,minmax(70rem, 1fr)); } .flex-row { display: flex; flex-direction: row; } .flex-column { display: flex; flex-direction: column; } .flex-1 { flex: 1; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .col-span-2 { grid-column: auto / span 2; } .col-span-3 { grid-column: auto / span 3; } .col-span-4 { grid-column: auto / span 4; } .col-span-5 { grid-column: auto / span 5; } .col-span-6 { grid-column: auto / span 6; } .col-span-7 { grid-column: auto / span 7; } .col-span-8 { grid-column: auto / span 8; } .col-start-1 { grid-column-start: 1; } .col-start-2 { grid-column-start: 2; } .col-start-3 { grid-column-start: 3; } .col-start-4 { grid-column-start: 4; } .col-start-5 { grid-column-start: 5; } .col-start-6 { grid-column-start: 6; } .col-start-7 { grid-column-start: 7; } .col-start-8 { grid-column-start: 8; } .row-span-2 { grid-row: auto / span 2; } .row-span-3 { grid-row: auto / span 3; } .row-span-4 { grid-row: auto / span 4; } .row-span-5 { grid-row: auto / span 5; } .row-span-6 { grid-row: auto / span 6; } .row-span-7 { grid-row: auto / span 7; } .row-span-8 { grid-row: auto / span 8; } .row-start-1 { grid-row-start: 1; } .row-start-2 { grid-row-start: 2; } .row-start-3 { grid-row-start: 3; } .row-start-4 { grid-row-start: 4; } .row-start-5 { grid-row-start: 5; } .row-start-6 { grid-row-start: 6; } .row-start-7 { grid-row-start: 7; } .row-start-8 { grid-row-start: 8; } .items-left { justify-items: start; } .content-left { justify-content: start; } .items-center { justify-items: center; } .content-center { justify-content: center; } .items-right { justify-items: end; } .content-right { justify-content: end; } .items-top { align-items: start; } .content-top { align-content: start; } .items-middle { align-items: center; } .content-middle { align-content: center; } .items-bottom { align-items: end; } .content-bottom { align-content: end; } .items-stretch { align-items: stretch; } .content-stretch { justify-content: stretch; } .space-between { justify-content: space-between; } .space-around { justify-content: space-around; } .self-left { margin-right: auto; place-self: start; } .self-center { margin-inline: auto; place-self: center; } .self-right { margin-left: auto; place-self: end; } .self-top { margin-bottom: auto; align-self: start; } .self-middle { margin-block: auto; align-self: center; } .self-bottom { margin-top: auto; align-self: end; } .self-stretch { align-self: stretch; } .full-width { width: 100%; } .full-height { height: 100%; } .screen-width { width: 100vw; } .screen-height { height: 100vh; } .auto-width { width: auto; } .auto-height { height: auto; } .width-90 { width: 90%; } .width-80 { width: 80%; } .width-70 { width: 70%; } .width-60 { width: 60%; } .width-50 { width: 50%; } .width-40 { width: 40%; } .width-30 { width: 30%; } .width-20 { width: 20%; } .width-10 { width: 10%; } .max-site-width { max-width: 140rem; width: 100%; } .max-width-140 { max-width: 140rem; } .max-width-130 { max-width: 130rem; } .max-width-120 { max-width: 120rem; } .max-width-110 { max-width: 110rem; } .max-width-100 { max-width: 100rem; } .max-width-90 { max-width: 90rem; } .max-width-80 { max-width: 80rem; } .max-width-70 { max-width: 70rem; } .max-width-60 { max-width: 60rem; } .max-width-50 { max-width: 50rem; } .max-width-40 { max-width: 40rem; } .max-width-30 { max-width: 30rem; } .max-width-20 { max-width: 20rem; } .max-width-10 { max-width: 10rem; } .radius-xs { border-radius: var(--radius-xs); } .radius-s { border-radius: var(--radius-s); } .radius-m { border-radius: var(--radius-m); } .radius-l { border-radius: var(--radius-l); } .radius-xl { border-radius: var(--radius-xl); } .radius-full { border-radius: var(--radius-full); } .border { border-width: 1px; border-style: solid; } .border-left { border-left-width: 1px; border-left-style: solid; } .border-right { border-right-width: 1px; border-right-style: solid; } .border-top { border-top-width: 1px; border-top-style: solid; } .border-bottom { border-bottom-width: 1px; border-bottom-style: solid; } .shadow-xs { box-shadow: var(--shadow-xs); } .shadow-s { box-shadow: var(--shadow-s); } .shadow-m { box-shadow: var(--shadow-m); } .shadow-l { box-shadow: var(--shadow-l); } .shadow-xl { box-shadow: var(--shadow-xl); } .opacity-0 { opacity: 0; } .opacity-10 { opacity: 0.1; } .opacity-20 { opacity: 0.2; } .opacity-30 { opacity: 0.3; } .opacity-40 { opacity: 0.4; } .opacity-50 { opacity: 0.5; } .opacity-60 { opacity: 0.6; } .opacity-70 { opacity: 0.7; } .opacity-80 { opacity: 0.8; } .opacity-90 { opacity: 0.9; } .opacity-100 { opacity: 1; } .aspect-1 { aspect-ratio: 1; } .aspect-4-3 { aspect-ratio: 4 / 3; } .aspect-3-4 { aspect-ratio: 3 / 4; } .aspect-3-2 { aspect-ratio: 3 / 2; } .aspect-2-3 { aspect-ratio: 2 / 3; } .aspect-16-9 { aspect-ratio: 16 / 9; } .aspect-9-16 { aspect-ratio: 9 / 16; } .fit-contain { object-fit: contain; } .fit-cover { object-fit: cover; } .fit-fill { object-fit: fill; } .bg-blur-xs { backdrop-filter: blur(2px); } .bg-blur-s { backdrop-filter: blur(4px); } .bg-blur-m { backdrop-filter: blur(8px); } .bg-blur-l { backdrop-filter: blur(16px); } .bg-blur-xl { backdrop-filter: blur(32px); } .grayscale { filter: grayscale(1); } .rotate-90 { transform: rotate(90deg); } .rotate-180 { transform: rotate(180deg); } .display-none { display: none; } .visible { visibility: visible; } .hidden { visibility: hidden; } .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-hidden { overflow-y: hidden; } .overflow-y-auto { overflow-y: auto; } .list-none { list-style-type: none; } .white-space-nowrap { white-space: nowrap; } .transition-global { transition: all 0.3s; } .relative { position: relative; } .absolute { position: absolute; } .sticky { position: sticky; } .fixed { position: fixed; } .inset-0 { inset: 0; } .bottom-0 { bottom: 0; } .top-0 { top: 0; } .left-0 { left: 0; } .right-0 { right: 0; } .pointer { cursor: pointer; } .not-allowed { cursor: not-allowed; } .cursor-auto { cursor: auto; } .no-pointer-events { pointer-events: none; } .z--1 { z-index: -1; } .z-0 { z-index: 0; } .z-1 { z-index: 1; } .z-10 { z-index: 10; } .z-100 { z-index: 100; } .z-1000 { z-index: 1000; } .z-10000 { z-index: 10000; } @media (max-width: 1400px) { .column--on-xl { grid-template-columns: 1fr; grid-auto-flow: row; } .row--on-xl { grid-template-columns: unset; grid-auto-flow: column; } .columns-2--on-xl { grid-template-columns: repeat(2, 1fr); } .columns-3--on-xl { grid-template-columns: repeat(3, 1fr); } .columns-4--on-xl { grid-template-columns: repeat(4, 1fr); } .columns-5--on-xl { grid-template-columns: repeat(5, 1fr); } .columns-6--on-xl { grid-template-columns: repeat(6, 1fr); } .col-span-1--on-xl { grid-column: auto / span 1; } .col-span-2--on-xl { grid-column: auto / span 2; } .col-span-3--on-xl { grid-column: auto / span 3; } .col-span-4--on-xl { grid-column: auto / span 4; } .col-span-5--on-xl { grid-column: auto / span 5; } .col-span-6--on-xl { grid-column: auto / span 6; } .col-start-1--on-xl { grid-column-start: 1; } .col-start-2--on-xl { grid-column-start: 2; } .col-start-3--on-xl { grid-column-start: 3; } .col-start-4--on-xl { grid-column-start: 4; } .col-start-5--on-xl { grid-column-start: 5; } .col-start-6--on-xl { grid-column-start: 6; } .row-span-1--on-xl { grid-row: auto / span 1; } .row-span-2--on-xl { grid-row: auto / span 2; } .row-span-3--on-xl { grid-row: auto / span 3; } .row-span-4--on-xl { grid-row: auto / span 4; } .row-span-5--on-xl { grid-row: auto / span 5; } .row-span-6--on-xl { grid-row: auto / span 6; } .row-start-1--on-xl { grid-row-start: 1; } .row-start-2--on-xl { grid-row-start: 2; } .row-start-3--on-xl { grid-row-start: 3; } .row-start-4--on-xl { grid-row-start: 4; } .row-start-5--on-xl { grid-row-start: 5; } .row-start-6--on-xl { grid-row-start: 6; } } @media (max-width: 991px) { .column--on-l { grid-template-columns: 1fr; grid-auto-flow: row; } .row--on-l { grid-template-columns: unset; grid-auto-flow: column; } .columns-2--on-l { grid-template-columns: repeat(2, 1fr); } .columns-3--on-l { grid-template-columns: repeat(3, 1fr); } .columns-4--on-l { grid-template-columns: repeat(4, 1fr); } .columns-5--on-l { grid-template-columns: repeat(5, 1fr); } .columns-6--on-l { grid-template-columns: repeat(6, 1fr); } .col-span-1--on-l { grid-column: auto / span 1; } .col-span-2--on-l { grid-column: auto / span 2; } .col-span-3--on-l { grid-column: auto / span 3; } .col-span-4--on-l { grid-column: auto / span 4; } .col-span-5--on-l { grid-column: auto / span 5; } .col-span-6--on-l { grid-column: auto / span 6; } .col-start-1--on-l { grid-column-start: 1; } .col-start-2--on-l { grid-column-start: 2; } .col-start-3--on-l { grid-column-start: 3; } .col-start-4--on-l { grid-column-start: 4; } .col-start-5--on-l { grid-column-start: 5; } .col-start-6--on-l { grid-column-start: 6; } .row-span-1--on-l { grid-row: auto / span 1; } .row-span-2--on-l { grid-row: auto / span 2; } .row-span-3--on-l { grid-row: auto / span 3; } .row-span-4--on-l { grid-row: auto / span 4; } .row-span-5--on-l { grid-row: auto / span 5; } .row-span-6--on-l { grid-row: auto / span 6; } .row-start-1--on-l { grid-row-start: 1; } .row-start-2--on-l { grid-row-start: 2; } .row-start-3--on-l { grid-row-start: 3; } .row-start-4--on-l { grid-row-start: 4; } .row-start-5--on-l { grid-row-start: 5; } .row-start-6--on-l { grid-row-start: 6; } } @media (max-width: 767px) { .column--on-m { grid-template-columns: 1fr; grid-auto-flow: row; } .row--on-m { grid-template-columns: unset; grid-auto-flow: column; } .columns-2--on-m { grid-template-columns: repeat(2, 1fr); } .columns-3--on-m { grid-template-columns: repeat(3, 1fr); } .columns-4--on-m { grid-template-columns: repeat(4, 1fr); } .columns-5--on-m { grid-template-columns: repeat(5, 1fr); } .columns-6--on-m { grid-template-columns: repeat(6, 1fr); } .col-span-1--on-m { grid-column: auto / span 1; } .col-span-2--on-m { grid-column: auto / span 2; } .col-span-3--on-m { grid-column: auto / span 3; } .col-span-4--on-m { grid-column: auto / span 4; } .col-span-5--on-m { grid-column: auto / span 5; } .col-span-6--on-m { grid-column: auto / span 6; } .col-start-1--on-m { grid-column: 1; } .col-start-2--on-m { grid-column: 2; } .col-start-3--on-m { grid-column: 3; } .col-start-4--on-m { grid-column: 4; } .col-start-5--on-m { grid-column: 5; } .col-start-6--on-m { grid-column: 6; } .row-span-1--on-m { grid-row: auto / span 1; } .row-span-2--on-m { grid-row: auto / span 2; } .row-span-3--on-m { grid-row: auto / span 3; } .row-span-4--on-m { grid-row: auto / span 4; } .row-span-5--on-m { grid-row: auto / span 5; } .row-span-6--on-m { grid-row: auto / span 6; } .row-start-1--on-m { grid-row-start: 1; } .row-start-2--on-m { grid-row-start: 2; } .row-start-3--on-m { grid-row-start: 3; } .row-start-4--on-m { grid-row-start: 4; } .row-start-5--on-m { grid-row-start: 5; } .row-start-6--on-m { grid-row-start: 6; } } @media (max-width: 478px) { .column--on-s { grid-template-columns: 1fr; grid-auto-flow: row; } .row--on-s { grid-template-columns: 1fr; grid-auto-flow: column; } .columns-2--on-s { grid-template-columns: repeat(2, 1fr); } .columns-3--on-s { grid-template-columns: repeat(3, 1fr); } .columns-4--on-s { grid-template-columns: repeat(4, 1fr); } .columns-5--on-s { grid-template-columns: repeat(5, 1fr); } .columns-6--on-s { grid-template-columns: repeat(6, 1fr); } .col-span-1--on-s { grid-column: auto / span 1; } .col-span-2--on-s { grid-column: auto / span 2; } .col-span-3--on-s { grid-column: auto / span 3; } .col-span-4--on-s { grid-column: auto / span 4; } .col-span-5--on-s { grid-column: auto / span 5; } .col-span-6--on-s { grid-column: auto / span 6; } .col-start-1--on-s { grid-column-start: 1; } .col-start-2--on-s { grid-column-start: 2; } .col-start-3--on-s { grid-column-start: 3; } .col-start-4--on-s { grid-column-start: 4; } .col-start-5--on-s { grid-column-start: 5; } .col-start-6--on-s { grid-column-start: 6; } .row-span-1--on-s { grid-row: auto / span 1; } .row-span-2--on-s { grid-row: auto / span 2; } .row-span-3--on-s { grid-row: auto / span 3; } .row-span-4--on-s { grid-row: auto / span 4; } .row-span-5--on-s { grid-row: auto / span 5; } .row-span-6--on-s { grid-row: auto / span 6; } .row-start-1--on-s { grid-row-start: 1; } .row-start-2--on-s { grid-row-start: 2; } .row-start-3--on-s { grid-row-start: 3; } .row-start-4--on-s { grid-row-start: 4; } .row-start-5--on-s { grid-row-start: 5; } .row-start-6--on-s { grid-row-start: 6; } }