/* File: automatic.css - Version: 3.3.5 - Generated: 2025-05-01 08:41:44 */ .overflow-detection *:not(#wpadminbar, #wpadminbar *), .overflow-detection *:not(#wpadminbar, #wpadminbar *)::before, .overflow-detection *:not(#wpadminbar, #wpadminbar *)::after { outline: 2px solid crimson !important; background: color-mix(in oklab, crimson, transparent 97%) !important; } :root, .color-scheme--main { --primary-hex: #1069c6; --primary-hsl: 211 85% 42%; --primary-rgb: 16 105 198; --primary-r: 16; --primary-g: 105; --primary-b: 198; --primary-h: 211; --primary-s: 85%; --primary-l: 42%; --primary-hover-h: 211; --primary-hover-s: 85%; --primary-hover-l: 48%; --primary-ultra-light-h: 211; --primary-ultra-light-s: 85%; --primary-ultra-light-l: 95%; --primary-light-h: 211; --primary-light-s: 85%; --primary-light-l: 85%; --primary-semi-light-h: 211; --primary-semi-light-s: 85%; --primary-semi-light-l: 65%; --primary-semi-dark-h: 211; --primary-semi-dark-s: 85%; --primary-semi-dark-l: 35%; --primary-dark-h: 211; --primary-dark-s: 85%; --primary-dark-l: 25%; --primary-ultra-dark-h: 211; --primary-ultra-dark-s: 85%; --primary-ultra-dark-l: 5%; --secondary-hex: #6d10c6; --secondary-hsl: 271 85% 42%; --secondary-rgb: 109 16 198; --secondary-r: 109; --secondary-g: 16; --secondary-b: 198; --secondary-h: 271; --secondary-s: 85%; --secondary-l: 42%; --secondary-hover-h: 271; --secondary-hover-s: 85%; --secondary-hover-l: 48%; --secondary-ultra-light-h: 271; --secondary-ultra-light-s: 85%; --secondary-ultra-light-l: 95%; --secondary-light-h: 271; --secondary-light-s: 85%; --secondary-light-l: 85%; --secondary-semi-light-h: 271; --secondary-semi-light-s: 85%; --secondary-semi-light-l: 65%; --secondary-semi-dark-h: 271; --secondary-semi-dark-s: 85%; --secondary-semi-dark-l: 35%; --secondary-dark-h: 271; --secondary-dark-s: 85%; --secondary-dark-l: 25%; --secondary-ultra-dark-h: 271; --secondary-ultra-dark-s: 85%; --secondary-ultra-dark-l: 5%; --tertiary-hex: #c61069; --tertiary-hsl: 331 85% 42%; --tertiary-rgb: 198 16 105; --tertiary-r: 198; --tertiary-g: 16; --tertiary-b: 105; --tertiary-h: 331; --tertiary-s: 85%; --tertiary-l: 42%; --tertiary-hover-h: 331; --tertiary-hover-s: 85%; --tertiary-hover-l: 48%; --tertiary-ultra-light-h: 331; --tertiary-ultra-light-s: 85%; --tertiary-ultra-light-l: 95%; --tertiary-light-h: 331; --tertiary-light-s: 85%; --tertiary-light-l: 85%; --tertiary-semi-light-h: 331; --tertiary-semi-light-s: 85%; --tertiary-semi-light-l: 65%; --tertiary-semi-dark-h: 331; --tertiary-semi-dark-s: 85%; --tertiary-semi-dark-l: 35%; --tertiary-dark-h: 331; --tertiary-dark-s: 85%; --tertiary-dark-l: 25%; --tertiary-ultra-dark-h: 331; --tertiary-ultra-dark-s: 85%; --tertiary-ultra-dark-l: 5%; --accent-hex: #3AC7D4; --accent-hsl: 185 64% 53%; --accent-rgb: 58 199 212; --accent-r: 58; --accent-g: 199; --accent-b: 212; --accent-h: 185; --accent-s: 64%; --accent-l: 53%; --accent-hover-h: 185; --accent-hover-s: 64%; --accent-hover-l: 61%; --accent-ultra-light-h: 185; --accent-ultra-light-s: 64%; --accent-ultra-light-l: 95%; --accent-light-h: 185; --accent-light-s: 64%; --accent-light-l: 85%; --accent-semi-light-h: 185; --accent-semi-light-s: 64%; --accent-semi-light-l: 65%; --accent-semi-dark-h: 185; --accent-semi-dark-s: 64%; --accent-semi-dark-l: 35%; --accent-dark-h: 185; --accent-dark-s: 64%; --accent-dark-l: 25%; --accent-ultra-dark-h: 185; --accent-ultra-dark-s: 64%; --accent-ultra-dark-l: 10%; --base-hex: #21404C; --base-hsl: 197 39% 21%; --base-rgb: 33 64 76; --base-r: 33; --base-g: 64; --base-b: 76; --base-h: 197; --base-s: 39%; --base-l: 21%; --base-hover-h: 197; --base-hover-s: 39%; --base-hover-l: 24%; --base-ultra-light-h: 197; --base-ultra-light-s: 39%; --base-ultra-light-l: 95%; --base-light-h: 197; --base-light-s: 39%; --base-light-l: 85%; --base-semi-light-h: 197; --base-semi-light-s: 39%; --base-semi-light-l: 65%; --base-semi-dark-h: 197; --base-semi-dark-s: 39%; --base-semi-dark-l: 35%; --base-dark-h: 197; --base-dark-s: 39%; --base-dark-l: 25%; --base-ultra-dark-h: 197; --base-ultra-dark-s: 39%; --base-ultra-dark-l: 10%; --neutral-hex: #141414; --neutral-hsl: 0 0% 8%; --neutral-rgb: 20 20 20; --neutral-r: 20; --neutral-g: 20; --neutral-b: 20; --neutral-h: 0; --neutral-s: 0%; --neutral-l: 8%; --neutral-hover-h: 0; --neutral-hover-s: 0%; --neutral-hover-l: 9%; --neutral-ultra-light-h: 0; --neutral-ultra-light-s: 0%; --neutral-ultra-light-l: 95%; --neutral-light-h: 0; --neutral-light-s: 0%; --neutral-light-l: 85%; --neutral-semi-light-h: 0; --neutral-semi-light-s: 0%; --neutral-semi-light-l: 65%; --neutral-semi-dark-h: 0; --neutral-semi-dark-s: 0%; --neutral-semi-dark-l: 35%; --neutral-dark-h: 0; --neutral-dark-s: 0%; --neutral-dark-l: 25%; --neutral-ultra-dark-h: 0; --neutral-ultra-dark-s: 0%; --neutral-ultra-dark-l: 3%; --primary: #1069c6; --primary-hover: #1277e2; --primary-ultra-light: #e7f2fd; --primary-light: #b8d8f9; --primary-semi-light: #5aa3f2; --primary-semi-dark: #0d57a5; --primary-dark: #0a3e76; --primary-ultra-dark: #020c18; --secondary: #6d10c6; --secondary-hover: #7e12e2; --secondary-ultra-light: #f3e7fd; --secondary-light: #dab8f9; --secondary-semi-light: #a85af2; --secondary-semi-dark: #5c0da5; --secondary-dark: #420a76; --secondary-ultra-dark: #0d0218; --tertiary: #c61069; --tertiary-hover: #e21277; --tertiary-ultra-light: #fde7f2; --tertiary-light: #f9b8d8; --tertiary-semi-light: #f25aa3; --tertiary-semi-dark: #a50d57; --tertiary-dark: #760a3e; --tertiary-ultra-dark: #18020c; --accent: #3AC7D4; --accent-hover: #5cd1db; --accent-ultra-light: #eaf9fa; --accent-light: #c0edf1; --accent-semi-light: #6dd5df; --accent-semi-dark: #208992; --accent-dark: #176269; --accent-ultra-dark: #09272a; --base: #21404C; --base-hover: #254855; --base-ultra-light: #edf4f7; --base-light: #cadfe8; --base-semi-light: #83b5c9; --base-semi-dark: #36687c; --base-dark: #274b59; --base-ultra-dark: #101e23; --neutral: #141414; --neutral-hover: #171717; --neutral-ultra-light: #f2f2f2; --neutral-light: #d9d9d9; --neutral-semi-light: #a6a6a6; --neutral-semi-dark: #595959; --neutral-dark: #404040; --neutral-ultra-dark: #080808; --white: #fff; --black: #000; --primary-trans-10: rgba(16, 105, 198, 0.1); --primary-trans-20: rgba(16, 105, 198, 0.2); --primary-trans-30: rgba(16, 105, 198, 0.3); --primary-trans-40: rgba(16, 105, 198, 0.4); --primary-trans-50: rgba(16, 105, 198, 0.5); --primary-trans-60: rgba(16, 105, 198, 0.6); --primary-trans-70: rgba(16, 105, 198, 0.7); --primary-trans-80: rgba(16, 105, 198, 0.8); --primary-trans-90: rgba(16, 105, 198, 0.9); --primary-light-trans-10: rgba(184, 216, 249, 0.1); --primary-light-trans-20: rgba(184, 216, 249, 0.2); --primary-light-trans-30: rgba(184, 216, 249, 0.3); --primary-light-trans-40: rgba(184, 216, 249, 0.4); --primary-light-trans-50: rgba(184, 216, 249, 0.5); --primary-light-trans-60: rgba(184, 216, 249, 0.6); --primary-light-trans-70: rgba(184, 216, 249, 0.7); --primary-light-trans-80: rgba(184, 216, 249, 0.8); --primary-light-trans-90: rgba(184, 216, 249, 0.9); --primary-dark-trans-10: rgba(10, 62, 118, 0.1); --primary-dark-trans-20: rgba(10, 62, 118, 0.2); --primary-dark-trans-30: rgba(10, 62, 118, 0.3); --primary-dark-trans-40: rgba(10, 62, 118, 0.4); --primary-dark-trans-50: rgba(10, 62, 118, 0.5); --primary-dark-trans-60: rgba(10, 62, 118, 0.6); --primary-dark-trans-70: rgba(10, 62, 118, 0.7); --primary-dark-trans-80: rgba(10, 62, 118, 0.8); --primary-dark-trans-90: rgba(10, 62, 118, 0.9); --primary-ultra-dark-trans-10: rgba(2, 12, 24, 0.1); --primary-ultra-dark-trans-20: rgba(2, 12, 24, 0.2); --primary-ultra-dark-trans-30: rgba(2, 12, 24, 0.3); --primary-ultra-dark-trans-40: rgba(2, 12, 24, 0.4); --primary-ultra-dark-trans-50: rgba(2, 12, 24, 0.5); --primary-ultra-dark-trans-60: rgba(2, 12, 24, 0.6); --primary-ultra-dark-trans-70: rgba(2, 12, 24, 0.7); --primary-ultra-dark-trans-80: rgba(2, 12, 24, 0.8); --primary-ultra-dark-trans-90: rgba(2, 12, 24, 0.9); --secondary-trans-10: rgba(109, 16, 198, 0.1); --secondary-trans-20: rgba(109, 16, 198, 0.2); --secondary-trans-30: rgba(109, 16, 198, 0.3); --secondary-trans-40: rgba(109, 16, 198, 0.4); --secondary-trans-50: rgba(109, 16, 198, 0.5); --secondary-trans-60: rgba(109, 16, 198, 0.6); --secondary-trans-70: rgba(109, 16, 198, 0.7); --secondary-trans-80: rgba(109, 16, 198, 0.8); --secondary-trans-90: rgba(109, 16, 198, 0.9); --secondary-light-trans-10: rgba(218, 184, 249, 0.1); --secondary-light-trans-20: rgba(218, 184, 249, 0.2); --secondary-light-trans-30: rgba(218, 184, 249, 0.3); --secondary-light-trans-40: rgba(218, 184, 249, 0.4); --secondary-light-trans-50: rgba(218, 184, 249, 0.5); --secondary-light-trans-60: rgba(218, 184, 249, 0.6); --secondary-light-trans-70: rgba(218, 184, 249, 0.7); --secondary-light-trans-80: rgba(218, 184, 249, 0.8); --secondary-light-trans-90: rgba(218, 184, 249, 0.9); --secondary-dark-trans-10: rgba(66, 10, 118, 0.1); --secondary-dark-trans-20: rgba(66, 10, 118, 0.2); --secondary-dark-trans-30: rgba(66, 10, 118, 0.3); --secondary-dark-trans-40: rgba(66, 10, 118, 0.4); --secondary-dark-trans-50: rgba(66, 10, 118, 0.5); --secondary-dark-trans-60: rgba(66, 10, 118, 0.6); --secondary-dark-trans-70: rgba(66, 10, 118, 0.7); --secondary-dark-trans-80: rgba(66, 10, 118, 0.8); --secondary-dark-trans-90: rgba(66, 10, 118, 0.9); --secondary-ultra-dark-trans-10: rgba(13, 2, 24, 0.1); --secondary-ultra-dark-trans-20: rgba(13, 2, 24, 0.2); --secondary-ultra-dark-trans-30: rgba(13, 2, 24, 0.3); --secondary-ultra-dark-trans-40: rgba(13, 2, 24, 0.4); --secondary-ultra-dark-trans-50: rgba(13, 2, 24, 0.5); --secondary-ultra-dark-trans-60: rgba(13, 2, 24, 0.6); --secondary-ultra-dark-trans-70: rgba(13, 2, 24, 0.7); --secondary-ultra-dark-trans-80: rgba(13, 2, 24, 0.8); --secondary-ultra-dark-trans-90: rgba(13, 2, 24, 0.9); --tertiary-trans-10: rgba(198, 16, 105, 0.1); --tertiary-trans-20: rgba(198, 16, 105, 0.2); --tertiary-trans-30: rgba(198, 16, 105, 0.3); --tertiary-trans-40: rgba(198, 16, 105, 0.4); --tertiary-trans-50: rgba(198, 16, 105, 0.5); --tertiary-trans-60: rgba(198, 16, 105, 0.6); --tertiary-trans-70: rgba(198, 16, 105, 0.7); --tertiary-trans-80: rgba(198, 16, 105, 0.8); --tertiary-trans-90: rgba(198, 16, 105, 0.9); --tertiary-light-trans-10: rgba(249, 184, 216, 0.1); --tertiary-light-trans-20: rgba(249, 184, 216, 0.2); --tertiary-light-trans-30: rgba(249, 184, 216, 0.3); --tertiary-light-trans-40: rgba(249, 184, 216, 0.4); --tertiary-light-trans-50: rgba(249, 184, 216, 0.5); --tertiary-light-trans-60: rgba(249, 184, 216, 0.6); --tertiary-light-trans-70: rgba(249, 184, 216, 0.7); --tertiary-light-trans-80: rgba(249, 184, 216, 0.8); --tertiary-light-trans-90: rgba(249, 184, 216, 0.9); --tertiary-dark-trans-10: rgba(118, 10, 62, 0.1); --tertiary-dark-trans-20: rgba(118, 10, 62, 0.2); --tertiary-dark-trans-30: rgba(118, 10, 62, 0.3); --tertiary-dark-trans-40: rgba(118, 10, 62, 0.4); --tertiary-dark-trans-50: rgba(118, 10, 62, 0.5); --tertiary-dark-trans-60: rgba(118, 10, 62, 0.6); --tertiary-dark-trans-70: rgba(118, 10, 62, 0.7); --tertiary-dark-trans-80: rgba(118, 10, 62, 0.8); --tertiary-dark-trans-90: rgba(118, 10, 62, 0.9); --tertiary-ultra-dark-trans-10: rgba(24, 2, 12, 0.1); --tertiary-ultra-dark-trans-20: rgba(24, 2, 12, 0.2); --tertiary-ultra-dark-trans-30: rgba(24, 2, 12, 0.3); --tertiary-ultra-dark-trans-40: rgba(24, 2, 12, 0.4); --tertiary-ultra-dark-trans-50: rgba(24, 2, 12, 0.5); --tertiary-ultra-dark-trans-60: rgba(24, 2, 12, 0.6); --tertiary-ultra-dark-trans-70: rgba(24, 2, 12, 0.7); --tertiary-ultra-dark-trans-80: rgba(24, 2, 12, 0.8); --tertiary-ultra-dark-trans-90: rgba(24, 2, 12, 0.9); --accent-trans-10: rgba(58, 199, 212, 0.1); --accent-trans-20: rgba(58, 199, 212, 0.2); --accent-trans-30: rgba(58, 199, 212, 0.3); --accent-trans-40: rgba(58, 199, 212, 0.4); --accent-trans-50: rgba(58, 199, 212, 0.5); --accent-trans-60: rgba(58, 199, 212, 0.6); --accent-trans-70: rgba(58, 199, 212, 0.7); --accent-trans-80: rgba(58, 199, 212, 0.8); --accent-trans-90: rgba(58, 199, 212, 0.9); --accent-light-trans-10: rgba(192, 237, 241, 0.1); --accent-light-trans-20: rgba(192, 237, 241, 0.2); --accent-light-trans-30: rgba(192, 237, 241, 0.3); --accent-light-trans-40: rgba(192, 237, 241, 0.4); --accent-light-trans-50: rgba(192, 237, 241, 0.5); --accent-light-trans-60: rgba(192, 237, 241, 0.6); --accent-light-trans-70: rgba(192, 237, 241, 0.7); --accent-light-trans-80: rgba(192, 237, 241, 0.8); --accent-light-trans-90: rgba(192, 237, 241, 0.9); --accent-dark-trans-10: rgba(23, 98, 105, 0.1); --accent-dark-trans-20: rgba(23, 98, 105, 0.2); --accent-dark-trans-30: rgba(23, 98, 105, 0.3); --accent-dark-trans-40: rgba(23, 98, 105, 0.4); --accent-dark-trans-50: rgba(23, 98, 105, 0.5); --accent-dark-trans-60: rgba(23, 98, 105, 0.6); --accent-dark-trans-70: rgba(23, 98, 105, 0.7); --accent-dark-trans-80: rgba(23, 98, 105, 0.8); --accent-dark-trans-90: rgba(23, 98, 105, 0.9); --accent-ultra-dark-trans-10: rgba(9, 39, 42, 0.1); --accent-ultra-dark-trans-20: rgba(9, 39, 42, 0.2); --accent-ultra-dark-trans-30: rgba(9, 39, 42, 0.3); --accent-ultra-dark-trans-40: rgba(9, 39, 42, 0.4); --accent-ultra-dark-trans-50: rgba(9, 39, 42, 0.5); --accent-ultra-dark-trans-60: rgba(9, 39, 42, 0.6); --accent-ultra-dark-trans-70: rgba(9, 39, 42, 0.7); --accent-ultra-dark-trans-80: rgba(9, 39, 42, 0.8); --accent-ultra-dark-trans-90: rgba(9, 39, 42, 0.9); --base-trans-10: rgba(33, 64, 76, 0.1); --base-trans-20: rgba(33, 64, 76, 0.2); --base-trans-30: rgba(33, 64, 76, 0.3); --base-trans-40: rgba(33, 64, 76, 0.4); --base-trans-50: rgba(33, 64, 76, 0.5); --base-trans-60: rgba(33, 64, 76, 0.6); --base-trans-70: rgba(33, 64, 76, 0.7); --base-trans-80: rgba(33, 64, 76, 0.8); --base-trans-90: rgba(33, 64, 76, 0.9); --base-light-trans-10: rgba(202, 223, 232, 0.1); --base-light-trans-20: rgba(202, 223, 232, 0.2); --base-light-trans-30: rgba(202, 223, 232, 0.3); --base-light-trans-40: rgba(202, 223, 232, 0.4); --base-light-trans-50: rgba(202, 223, 232, 0.5); --base-light-trans-60: rgba(202, 223, 232, 0.6); --base-light-trans-70: rgba(202, 223, 232, 0.7); --base-light-trans-80: rgba(202, 223, 232, 0.8); --base-light-trans-90: rgba(202, 223, 232, 0.9); --base-dark-trans-10: rgba(39, 75, 89, 0.1); --base-dark-trans-20: rgba(39, 75, 89, 0.2); --base-dark-trans-30: rgba(39, 75, 89, 0.3); --base-dark-trans-40: rgba(39, 75, 89, 0.4); --base-dark-trans-50: rgba(39, 75, 89, 0.5); --base-dark-trans-60: rgba(39, 75, 89, 0.6); --base-dark-trans-70: rgba(39, 75, 89, 0.7); --base-dark-trans-80: rgba(39, 75, 89, 0.8); --base-dark-trans-90: rgba(39, 75, 89, 0.9); --base-ultra-dark-trans-10: rgba(16, 30, 35, 0.1); --base-ultra-dark-trans-20: rgba(16, 30, 35, 0.2); --base-ultra-dark-trans-30: rgba(16, 30, 35, 0.3); --base-ultra-dark-trans-40: rgba(16, 30, 35, 0.4); --base-ultra-dark-trans-50: rgba(16, 30, 35, 0.5); --base-ultra-dark-trans-60: rgba(16, 30, 35, 0.6); --base-ultra-dark-trans-70: rgba(16, 30, 35, 0.7); --base-ultra-dark-trans-80: rgba(16, 30, 35, 0.8); --base-ultra-dark-trans-90: rgba(16, 30, 35, 0.9); --neutral-trans-10: rgba(20, 20, 20, 0.1); --neutral-trans-20: rgba(20, 20, 20, 0.2); --neutral-trans-30: rgba(20, 20, 20, 0.3); --neutral-trans-40: rgba(20, 20, 20, 0.4); --neutral-trans-50: rgba(20, 20, 20, 0.5); --neutral-trans-60: rgba(20, 20, 20, 0.6); --neutral-trans-70: rgba(20, 20, 20, 0.7); --neutral-trans-80: rgba(20, 20, 20, 0.8); --neutral-trans-90: rgba(20, 20, 20, 0.9); --neutral-light-trans-10: rgba(217, 217, 217, 0.1); --neutral-light-trans-20: rgba(217, 217, 217, 0.2); --neutral-light-trans-30: rgba(217, 217, 217, 0.3); --neutral-light-trans-40: rgba(217, 217, 217, 0.4); --neutral-light-trans-50: rgba(217, 217, 217, 0.5); --neutral-light-trans-60: rgba(217, 217, 217, 0.6); --neutral-light-trans-70: rgba(217, 217, 217, 0.7); --neutral-light-trans-80: rgba(217, 217, 217, 0.8); --neutral-light-trans-90: rgba(217, 217, 217, 0.9); --neutral-dark-trans-10: rgba(64, 64, 64, 0.1); --neutral-dark-trans-20: rgba(64, 64, 64, 0.2); --neutral-dark-trans-30: rgba(64, 64, 64, 0.3); --neutral-dark-trans-40: rgba(64, 64, 64, 0.4); --neutral-dark-trans-50: rgba(64, 64, 64, 0.5); --neutral-dark-trans-60: rgba(64, 64, 64, 0.6); --neutral-dark-trans-70: rgba(64, 64, 64, 0.7); --neutral-dark-trans-80: rgba(64, 64, 64, 0.8); --neutral-dark-trans-90: rgba(64, 64, 64, 0.9); --neutral-ultra-dark-trans-10: rgba(8, 8, 8, 0.1); --neutral-ultra-dark-trans-20: rgba(8, 8, 8, 0.2); --neutral-ultra-dark-trans-30: rgba(8, 8, 8, 0.3); --neutral-ultra-dark-trans-40: rgba(8, 8, 8, 0.4); --neutral-ultra-dark-trans-50: rgba(8, 8, 8, 0.5); --neutral-ultra-dark-trans-60: rgba(8, 8, 8, 0.6); --neutral-ultra-dark-trans-70: rgba(8, 8, 8, 0.7); --neutral-ultra-dark-trans-80: rgba(8, 8, 8, 0.8); --neutral-ultra-dark-trans-90: rgba(8, 8, 8, 0.9); --white-trans-10: rgba(255, 255, 255, 0.1); --white-trans-20: rgba(255, 255, 255, 0.2); --white-trans-30: rgba(255, 255, 255, 0.3); --white-trans-40: rgba(255, 255, 255, 0.4); --white-trans-50: rgba(255, 255, 255, 0.5); --white-trans-60: rgba(255, 255, 255, 0.6); --white-trans-70: rgba(255, 255, 255, 0.7); --white-trans-80: rgba(255, 255, 255, 0.8); --white-trans-90: rgba(255, 255, 255, 0.9); --black-trans-10: rgba(0, 0, 0, 0.1); --black-trans-20: rgba(0, 0, 0, 0.2); --black-trans-30: rgba(0, 0, 0, 0.3); --black-trans-40: rgba(0, 0, 0, 0.4); --black-trans-50: rgba(0, 0, 0, 0.5); --black-trans-60: rgba(0, 0, 0, 0.6); --black-trans-70: rgba(0, 0, 0, 0.7); --black-trans-80: rgba(0, 0, 0, 0.8); --black-trans-90: rgba(0, 0, 0, 0.9); --shade-white: #fff; --shade-black: #000; --bg-ultra-light: var(--neutral-ultra-light); --bg-light: var(--neutral-light); --bg-dark: var(--neutral-dark); --bg-ultra-dark: var(--neutral-ultra-dark); --text-light: var(--white); --text-light-muted: var(--white-trans-80); --text-dark: var(--black); --text-dark-muted: var(--black-trans-80); --body-bg-color: var(--white); --body-color: var(--text-dark-muted); --heading-color: var(--text-dark); } :root { --on: initial; --off: ; --section-padding-x: 1.25rem; --section-padding-block: var(--section-space-m); --section-gutter: 1.25rem; --gutter: 1.25rem; --text-xs: 1.26rem; --text-s: 1.42rem; --text-m: 1.8rem; --text-l: 2.025rem; --text-xl: 2.28rem; --text-xxl: 2.565rem; --root-font-size: 100%; --h6: 1.26rem; --h5: 1.42rem; --h4: 1.8rem; --h3: 2.025rem; --h2: 2.28rem; --h1: 2.565rem; --space-xs: 1.896rem; --space-s: 2.133rem; --space-m: 2.4rem; --space-l: 2.7rem; --space-xl: 3.038rem; --space-xxl: 3.42rem; --section-space-xs: 3.84rem; --section-space-s: 4.8rem; --section-space-m: 6rem; --section-space-l: 7.5rem; --section-space-xl: 9.375rem; --section-space-xxl: 11.719rem; --content-width: 85.375rem; --content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2)); --width-xs: calc(var(--content-width) * 0.1); --width-s: calc(var(--content-width) * 0.2); --width-m: calc(var(--content-width) * 0.4); --width-l: calc(var(--content-width) * 0.6); --width-xl: calc(var(--content-width) * 0.8); --width-xxl: calc(var(--content-width) * 0.9); --width-vp-max: calc(var(--content-width) * 1); --width-content: calc(var(--content-width) * 1); --width-full: calc(var(--content-width) * 100%); --width-10: calc(var(--content-width) * 0.1); --width-20: calc(var(--content-width) * 0.2); --width-30: calc(var(--content-width) * 0.3); --width-40: calc(var(--content-width) * 0.4); --width-50: calc(var(--content-width) * 0.5); --width-60: calc(var(--content-width) * 0.6); --width-70: calc(var(--content-width) * 0.7); --width-80: calc(var(--content-width) * 0.8); --width-90: calc(var(--content-width) * 0.9); --focus-color: var(--primary); --focus-width: 2px; --focus-offset: 2px; --box-shadow-m: 0 0 40px var(--black-trans-10); --box-shadow-l: 0 0 60px var(--black-trans-20); --box-shadow-xl: 0 0 80px var(--black-trans-30); --box-shadow-1: 0 0 40px var(--black-trans-10); --box-shadow-2: 0 0 60px var(--black-trans-20); --box-shadow-3: 0 0 80px var(--black-trans-30); --admin-bar-height: var(--wp-admin--admin-bar--height, 0px); --text-xxl-max-width: 100%; --text-xl-max-width: 100%; --text-l-max-width: 100%; --text-m-line-height: calc(6px + 2ex); --text-m-max-width: 100%; --text-s-max-width: 100%; --text-xs-max-width: 100%; --base-text-lh: calc(6px + 2ex); --heading-color: var(--text-dark); --heading-line-height: calc(4px + 2ex); --heading-font-weight: 700; --heading-text-transform: uppercase; --heading-text-wrap: pretty; --base-heading-lh: calc(4px + 2ex); --h1-max-width: 100%; --h2-max-width: 100%; --h3-max-width: 100%; --h4-line-height: calc(4px + 2ex); --h4-max-width: 100%; --h5-max-width: 100%; --h6-max-width: 100%; --text-color: var(--text-dark-muted); --text-line-height: calc(6px + 2ex); --text-text-wrap: pretty; } :root { --grid-1: repeat(1, minmax(0, 1fr)); --grid-2: repeat(2, minmax(0, 1fr)); --grid-3: repeat(3, minmax(0, 1fr)); --grid-4: repeat(4, minmax(0, 1fr)); --grid-5: repeat(5, minmax(0, 1fr)); --grid-6: repeat(6, minmax(0, 1fr)); --grid-7: repeat(7, minmax(0, 1fr)); --grid-8: repeat(8, minmax(0, 1fr)); --grid-9: repeat(9, minmax(0, 1fr)); --grid-10: repeat(10, minmax(0, 1fr)); --grid-11: repeat(11, minmax(0, 1fr)); --grid-12: repeat(12, minmax(0, 1fr)); --grid-1-2: minmax(0, 1fr) minmax(0, 2fr); --grid-1-3: minmax(0, 1fr) minmax(0, 3fr); --grid-2-1: minmax(0, 2fr) minmax(0, 1fr); --grid-2-3: minmax(0, 2fr) minmax(0, 3fr); --grid-3-1: minmax(0, 3fr) minmax(0, 1fr); --grid-3-2: minmax(0, 3fr) minmax(0, 2fr); } :root { --grid-auto-2: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((2 - 1) * var(--grid-gap))) / 2) * 0.6, (100% - (2 - 1) * var(--grid-gap)) / 2)), 1fr)); --grid-auto-3: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((3 - 1) * var(--grid-gap))) / 3) * 0.6, (100% - (3 - 1) * var(--grid-gap)) / 3)), 1fr)); --grid-auto-4: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((4 - 1) * var(--grid-gap))) / 4) * 0.6, (100% - (4 - 1) * var(--grid-gap)) / 4)), 1fr)); --grid-auto-5: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((5 - 1) * var(--grid-gap))) / 5) * 0.6, (100% - (5 - 1) * var(--grid-gap)) / 5)), 1fr)); --grid-auto-6: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((6 - 1) * var(--grid-gap))) / 6) * 0.6, (100% - (6 - 1) * var(--grid-gap)) / 6)), 1fr)); --grid-auto-7: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((7 - 1) * var(--grid-gap))) / 7) * 0.6, (100% - (7 - 1) * var(--grid-gap)) / 7)), 1fr)); --grid-auto-8: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((8 - 1) * var(--grid-gap))) / 8) * 0.6, (100% - (8 - 1) * var(--grid-gap)) / 8)), 1fr)); --grid-auto-9: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((9 - 1) * var(--grid-gap))) / 9) * 0.6, (100% - (9 - 1) * var(--grid-gap)) / 9)), 1fr)); --grid-auto-10: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((10 - 1) * var(--grid-gap))) / 10) * 0.6, (100% - (10 - 1) * var(--grid-gap)) / 10)), 1fr)); --grid-auto-11: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((11 - 1) * var(--grid-gap))) / 11) * 0.6, (100% - (11 - 1) * var(--grid-gap)) / 11)), 1fr)); --grid-auto-12: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((12 - 1) * var(--grid-gap))) / 12) * 0.6, (100% - (12 - 1) * var(--grid-gap)) / 12)), 1fr)); --auto-grid-aggressiveness: 0.6; } :root { --header-height: 0rem; --header-height-xl: 0rem; --header-height-l: 0rem; --header-height-m: 0rem; --header-height-s: 0rem; } @media (max-width: 1366px) { :root { --header-height: var(--header-height-xl); } } @media (max-width: 992px) { :root { --header-height: var(--header-height-l); } } @media (max-width: 768px) { :root { --header-height: var(--header-height-m); } } @media (max-width: 480px) { :root { --header-height: var(--header-height-s); } } :root { --paragraph-spacing: 1em; --heading-spacing: 1.2em; --list-spacing: var(--paragraph-spacing); --list-indent-spacing: 2em; --list-item-spacing: 0.5em; --nested-list-indent-spacing: 1em; --flow-spacing: var(--paragraph-spacing); --figure-spacing: var(--paragraph-spacing); --figcaption-spacing: 0.5em; --blockquote-spacing: var(--paragraph-spacing); } :root { --option-primary-btn-outline: on; --option-secondary-btn-outline: on; --option-accent-btn-outline: on; --btn-padding-block: 0.75em; --btn-padding-inline: 1.25em; --btn-min-width: 8.75rem; --btn-line-height: 1; --btn-font-weight: 400; --btn-font-style: normal; --btn-text-decoration: none; --btn-text-decoration-hover: none; --btn-letter-spacing: 1; --btn-text-transform: uppercase; --btn-border-width: 2px; --btn-outline-border-width: 2px; --btn-border-style: solid; --btn-border-radius: var(--radius); --btn-justify-content: center; --btn-text-align: center; } /* Deprecated in ACSS 2.7 */ :root { --btn-border-size: 2px; --btn-radius: var(--radius); --outline-btn-border-size: 2px; --btn-pad-x: 1.25em; --btn-pad-y: 0.75em; --btn-text-style: normal; --btn-weight: 400; --btn-width: 8.75; } :root { --link-color: var(--primary); --link-color-hover: var(--primary-hover); --link-transition: var(--transition); --link-decoration: inherit; --link-decoration-hover: inherit; --link-underline-offset: auto; --link-weight: inherit; } :root { --col-width-s: 13rem; --col-width-m: 25rem; --col-width-l: 38rem; --col-rule-width-s: 0.5px; --col-rule-width-m: 1px; --col-rule-width-l: 3px; } :root { --sticky-s: 2.5%; --sticky-m: 5%; --sticky-l: 10%; } :root { --content-gap: var(--space-m); --fr-content-gap: var(--space-m); --container-gap: var(--space-xl); --fr-container-gap: var(--space-xl); --grid-gap: var(--space-m); --fr-grid-gap: var(--space-m); --bg-ultra-light-text: var(--text-dark); --bg-light-text: var(--text-dark); --bg-dark-text: var(--text-light); --bg-ultra-dark-text: var(--text-light); --bg-ultra-light-heading: var(--text-dark); --bg-light-heading: var(--text-dark); --bg-dark-heading: var(--text-light); --bg-ultra-dark-heading: var(--text-light); --bg-ultra-light-button: primary; --bg-light-button: primary; --bg-dark-button: primary; --bg-ultra-dark-button: primary; } :root { --radius: 0.5em; --radius-50: 50%; --radius-circle: 50vw; --radius-none: 0; --radius-xs: 0.2222222222em; --radius-s: 0.3333333333em; --radius-m: 0.5em; --radius-l: 0.75em; --radius-xl: 1.125em; --radius-xxl: 1.6875em; --border-size: 0px; --border-width: 0px; --border-style: solid; --border-color-dark: var(--black-trans-20); --border-color-light: var(--white-trans-20); --border: var(--border-size) var(--border-style) var(--border-color-dark) var(--border-radius); --border-light: var(--border-size) var(--border-style) var(--border-color-light); --border-dark: var(--border-size) var(--border-style) var(--border-color-dark); } :root { --divider-size: 1px; --divider-style: solid; --divider-inline-size: 100%; --divider-gap: var(--content-gap); --divider-color-dark: var(--black-trans-20); --divider-color-light: var(--white-trans-20); --divider: var(--divider-size) var(--divider-style) var(--divider-color-dark); --divider-light: var(--divider-size) var(--divider-style) var(--divider-color-light); --divider-dark: var(--divider-size) var(--divider-style) var(--divider-color-dark); } :root { --transition-duration: 0.3s; --transition-timing: ease-in-out; --transition-delay: 0s; --transition: background var(--transition-duration) var(--transition-timing) var(--transition-delay), color var(--transition-duration) var(--transition-timing) var(--transition-delay), border var(--transition-duration) var(--transition-timing) var(--transition-delay), translate var(--transition-duration) var(--transition-timing) var(--transition-delay); } :root { --icon-size: 32px; --icon-padding: 0.35em; --icon-radius: var(--radius); --icon-background: var(--primary-light); --icon-background-hover: var(--primary-ultra-light); --icon-border-color: var(--primary-dark-trans-10); --icon-border-color-hover: var(--primary-dark-trans-10); --icon-border-width: var(--border-width); --icon-border-style: var(--border-style); --icon-color: var(--primary-dark); --icon-color-hover: var(--primary-semi-dark); --icon-list-icon-size: 1em; --icon-list-gap: 1em; --icon-light-color: var(--primary-light); --icon-light-color-hover: var(--primary-ultra-light); --icon-light-background: var(--primary-dark); --icon-light-background-hover: var(--primary-ultra-dark); --icon-light-border-color: var(--primary-dark-trans-10); --icon-light-border-color-hover: var(--primary-dark-trans-10); --icon-dark-color: var(--primary-dark); --icon-dark-color-hover: var(--primary-semi-dark); --icon-dark-background: var(--primary-light); --icon-dark-background-hover: var(--primary-ultra-light); --icon-dark-border-color: var(--primary-dark-trans-10); --icon-dark-border-color-hover: var(--primary-dark-trans-10); --icon-size-s: 16px; --icon-size-m: 32px; --icon-size-l: 64px; --icon-padding-s: var(--icon-padding); --icon-padding-m: var(--icon-padding); --icon-padding-l: var(--icon-padding); --icon-border-color: var(--icon-light-border-color); --icon-border-color-hover: var(--icon-light-border-color-hover); } body.boxed-layout { inline-size: 100%; max-inline-size: var(--body-max-width, 1920px); box-shadow: var(--body-box-shadow, 0 0 80px 0 var(--neutral-trans-20)); border-color: var(--body-border-color, transparent); border-style: var(--body-border-style, none); border-width: var(--body-border-width, 0); border-radius: var(--body-border-radius, 0); margin-block-start: var(--body-margin-top, 0) !important; margin-inline: auto !important; } body.boxed-layout header.sticky > *, body.boxed-layout #brx-header.sticky.sticky > * { width: var(--boxed-width); margin-inline: auto; } [id] { scroll-margin-top: var(--offset, 0); } html { font-size: var(--root-font-size) !important; } :root { interpolate-size: allow-keywords; } *, *::before, *::after { box-sizing: border-box; } body { min-block-size: 100vh; } input, button, textarea, select { font: inherit; } :where(dd) { margin-inline-start: 0; } .focus-parent:focus-within:not(:has(:focus-visible)) { outline: none; outline-offset: 0; } .focus-parent:focus-within { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); } .focus-parent :focus { outline: none !important; box-shadow: none !important; } .focus-parent--shadow:focus-within:not(:has(:focus-visible)) { box-shadow: none; } .focus-parent--shadow:focus-within { box-shadow: 0 0 0 var(--focus-width) var(--focus-color); } .focus-parent--shadow :focus { outline: none !important; box-shadow: none !important; } .focus-parent--outline:focus-within:not(:has(:focus-visible)) { outline: none; outline-offset: 0; } .focus-parent--outline:focus-within { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); } .focus-parent--outline :focus { outline: none !important; box-shadow: none !important; } .hidden-accessible { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0; margin: -1px; overflow: hidden; clip-path: rect(0, 0, 0, 0); white-space: nowrap; /* added line */ border: 0; } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { -webkit-animation-duration: 0.01ms !important; animation-duration: 0.01ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body:not(:has([data-sticky-header="0"]), .content-offset--off) .acss-offset-content:not(.panel-content) > *:first-child > *:first-child:not(.bricks-shape-divider) { margin-block-start: var(--header-height); } :where(section:not(section section)) { padding-block: var(--section-padding-block); padding-inline: var(--gutter); } body:where(:not(.block-editor-writing-flow, .editor-styles-wrapper)) :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) { margin-block: 0; } .smart-spacing-normalize :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) { margin-block: 0; } .smart-spacing-preview > * + *, .smart-spacing.smart-spacing > * + * { margin-block-start: var(--flow-spacing, initial); margin-block-end: 0; } .smart-spacing-preview > * + :where(h1, h2, h3, h4, h5, h6), .smart-spacing.smart-spacing > * + :where(h1, h2, h3, h4, h5, h6) { margin-block-start: var(--heading-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } .smart-spacing-preview > :where(* + h2), .smart-spacing.smart-spacing > :where(* + h2) { margin-block-start: var(--h2-spacing, var(--heading-spacing)); margin-block-end: 0; } .smart-spacing-preview > :where(* + h3), .smart-spacing.smart-spacing > :where(* + h3) { margin-block-start: var(--h3-spacing, var(--heading-spacing)); margin-block-end: 0; } .smart-spacing-preview > :where(* + h4), .smart-spacing.smart-spacing > :where(* + h4) { margin-block-start: var(--h4-spacing, var(--heading-spacing)); margin-block-end: 0; } .smart-spacing-preview > :where(* + h5), .smart-spacing.smart-spacing > :where(* + h5) { margin-block-start: var(--h5-spacing, var(--heading-spacing)); margin-block-end: 0; } .smart-spacing-preview > :where(* + h6), .smart-spacing.smart-spacing > :where(* + h6) { margin-block-start: var(--h6-spacing, var(--heading-spacing)); margin-block-end: 0; } .smart-spacing-preview > * + p, .smart-spacing.smart-spacing > * + p { margin-block-start: var(--paragraph-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } .smart-spacing-preview > :is(* + ul, * + ol), .smart-spacing.smart-spacing > :is(* + ul, * + ol) { margin-block: var(--list-spacing, var(--flow-spacing, initial)); } .smart-spacing-preview > :is(ul, ol), .smart-spacing.smart-spacing > :is(ul, ol) { padding-inline-start: var(--list-indent-spacing, var(--flow-spacing, initial)); } .smart-spacing-preview > ul * + li, .smart-spacing-preview > ol * + li, .smart-spacing.smart-spacing > ul * + li, .smart-spacing.smart-spacing > ol * + li { margin-block-start: var(--list-item-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } .smart-spacing-preview > ul ul, .smart-spacing-preview > ol ol, .smart-spacing-preview > ul ol, .smart-spacing-preview > ol ul, .smart-spacing.smart-spacing > ul ul, .smart-spacing.smart-spacing > ol ol, .smart-spacing.smart-spacing > ul ol, .smart-spacing.smart-spacing > ol ul { margin-block: var(--nested-list-spacing, var(--list-item-spacing, initial)); padding-inline-start: var(--nested-list-indent-spacing, initial); } .smart-spacing-preview > :is(ul, ol) :is(ul, ol) li, .smart-spacing.smart-spacing > :is(ul, ol) :is(ul, ol) li { margin-block-start: var(--nested-list-item-spacing, var(--list-item-spacing, initial)); } .smart-spacing-preview > * + figure, .smart-spacing-preview > * + picture, .smart-spacing.smart-spacing > * + figure, .smart-spacing.smart-spacing > * + picture { margin-block: var(--figure-spacing, var(--flow-spacing, initial)); } .smart-spacing-preview figcaption, .smart-spacing.smart-spacing figcaption { margin-block: var(--figcaption-spacing, var(--flow-spacing, initial)); } .smart-spacing-preview > * + blockquote:where(:not(figure > blockquote)), .smart-spacing.smart-spacing > * + blockquote:where(:not(figure > blockquote)) { margin-block: var(--blockquote-spacing, var(--flow-spacing, initial)); } .smart-spacing-preview > blockquote * + *, .smart-spacing.smart-spacing > blockquote * + * { margin-block-start: var(--paragraph-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } .smart-spacing-preview > :is(figure, blockquote, ul, ol):where(:not(:first-child)) + *, .smart-spacing.smart-spacing > :is(figure, blockquote, ul, ol):where(:not(:first-child)) + * { --paragraph-spacing: 0; --flow-spacing: 0; } .smart-spacing--off.smart-spacing--off :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) { margin-block: 0; } :where(.woocommerce-checkout) p { margin: 0 0 1.2em; } .brxe-text > * + *, .brxe-post-content:where(:not([data-source="bricks"])) > * + * { margin-block-start: var(--flow-spacing, initial); margin-block-end: 0; } .brxe-text > * + :where(h1, h2, h3, h4, h5, h6), .brxe-post-content:where(:not([data-source="bricks"])) > * + :where(h1, h2, h3, h4, h5, h6) { margin-block-start: var(--heading-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } .brxe-text > :where(* + h2), .brxe-post-content:where(:not([data-source="bricks"])) > :where(* + h2) { margin-block-start: var(--h2-spacing, var(--heading-spacing)); margin-block-end: 0; } .brxe-text > :where(* + h3), .brxe-post-content:where(:not([data-source="bricks"])) > :where(* + h3) { margin-block-start: var(--h3-spacing, var(--heading-spacing)); margin-block-end: 0; } .brxe-text > :where(* + h4), .brxe-post-content:where(:not([data-source="bricks"])) > :where(* + h4) { margin-block-start: var(--h4-spacing, var(--heading-spacing)); margin-block-end: 0; } .brxe-text > :where(* + h5), .brxe-post-content:where(:not([data-source="bricks"])) > :where(* + h5) { margin-block-start: var(--h5-spacing, var(--heading-spacing)); margin-block-end: 0; } .brxe-text > :where(* + h6), .brxe-post-content:where(:not([data-source="bricks"])) > :where(* + h6) { margin-block-start: var(--h6-spacing, var(--heading-spacing)); margin-block-end: 0; } .brxe-text > * + p, .brxe-post-content:where(:not([data-source="bricks"])) > * + p { margin-block-start: var(--paragraph-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } .brxe-text > :is(* + ul, * + ol), .brxe-post-content:where(:not([data-source="bricks"])) > :is(* + ul, * + ol) { margin-block: var(--list-spacing, var(--flow-spacing, initial)); } .brxe-text > :is(ul, ol), .brxe-post-content:where(:not([data-source="bricks"])) > :is(ul, ol) { padding-inline-start: var(--list-indent-spacing, var(--flow-spacing, initial)); } .brxe-text > ul * + li, .brxe-text > ol * + li, .brxe-post-content:where(:not([data-source="bricks"])) > ul * + li, .brxe-post-content:where(:not([data-source="bricks"])) > ol * + li { margin-block-start: var(--list-item-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } .brxe-text > ul ul, .brxe-text > ol ol, .brxe-text > ul ol, .brxe-text > ol ul, .brxe-post-content:where(:not([data-source="bricks"])) > ul ul, .brxe-post-content:where(:not([data-source="bricks"])) > ol ol, .brxe-post-content:where(:not([data-source="bricks"])) > ul ol, .brxe-post-content:where(:not([data-source="bricks"])) > ol ul { margin-block: var(--nested-list-spacing, var(--list-item-spacing, initial)); padding-inline-start: var(--nested-list-indent-spacing, initial); } .brxe-text > :is(ul, ol) :is(ul, ol) li, .brxe-post-content:where(:not([data-source="bricks"])) > :is(ul, ol) :is(ul, ol) li { margin-block-start: var(--nested-list-item-spacing, var(--list-item-spacing, initial)); } .brxe-text > * + figure, .brxe-text > * + picture, .brxe-post-content:where(:not([data-source="bricks"])) > * + figure, .brxe-post-content:where(:not([data-source="bricks"])) > * + picture { margin-block: var(--figure-spacing, var(--flow-spacing, initial)); } .brxe-text figcaption, .brxe-post-content:where(:not([data-source="bricks"])) figcaption { margin-block: var(--figcaption-spacing, var(--flow-spacing, initial)); } .brxe-text > * + blockquote:where(:not(figure > blockquote)), .brxe-post-content:where(:not([data-source="bricks"])) > * + blockquote:where(:not(figure > blockquote)) { margin-block: var(--blockquote-spacing, var(--flow-spacing, initial)); } .brxe-text > blockquote * + *, .brxe-post-content:where(:not([data-source="bricks"])) > blockquote * + * { margin-block-start: var(--paragraph-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } .brxe-text > :is(figure, blockquote, ul, ol):where(:not(:first-child)) + *, .brxe-post-content:where(:not([data-source="bricks"])) > :is(figure, blockquote, ul, ol):where(:not(:first-child)) + * { --paragraph-spacing: 0; --flow-spacing: 0; } body :where(p:last-of-type) + :is(h1, h2, h3, h4, h5, h6) { margin-top: 0; margin-block-start: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > * + * { margin-block-start: var(--flow-spacing, initial); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > * + :where(h1, h2, h3, h4, h5, h6) { margin-block-start: var(--heading-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > :where(* + h2) { margin-block-start: var(--h2-spacing, var(--heading-spacing)); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > :where(* + h3) { margin-block-start: var(--h3-spacing, var(--heading-spacing)); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > :where(* + h4) { margin-block-start: var(--h4-spacing, var(--heading-spacing)); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > :where(* + h5) { margin-block-start: var(--h5-spacing, var(--heading-spacing)); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > :where(* + h6) { margin-block-start: var(--h6-spacing, var(--heading-spacing)); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > * + p { margin-block-start: var(--paragraph-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > :is(* + ul, * + ol) { margin-block: var(--list-spacing, var(--flow-spacing, initial)); } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > :is(ul, ol) { padding-inline-start: var(--list-indent-spacing, var(--flow-spacing, initial)); } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > ul * + li, :not(.woocommerce-checkout) [class*="woocommerce"] * + p > ol * + li { margin-block-start: var(--list-item-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > ul ul, :not(.woocommerce-checkout) [class*="woocommerce"] * + p > ol ol, :not(.woocommerce-checkout) [class*="woocommerce"] * + p > ul ol, :not(.woocommerce-checkout) [class*="woocommerce"] * + p > ol ul { margin-block: var(--nested-list-spacing, var(--list-item-spacing, initial)); padding-inline-start: var(--nested-list-indent-spacing, initial); } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > :is(ul, ol) :is(ul, ol) li { margin-block-start: var(--nested-list-item-spacing, var(--list-item-spacing, initial)); } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > * + figure, :not(.woocommerce-checkout) [class*="woocommerce"] * + p > * + picture { margin-block: var(--figure-spacing, var(--flow-spacing, initial)); } :not(.woocommerce-checkout) [class*="woocommerce"] * + p figcaption { margin-block: var(--figcaption-spacing, var(--flow-spacing, initial)); } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > * + blockquote:where(:not(figure > blockquote)) { margin-block: var(--blockquote-spacing, var(--flow-spacing, initial)); } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > blockquote * + * { margin-block-start: var(--paragraph-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > :is(figure, blockquote, ul, ol):where(:not(:first-child)) + * { --paragraph-spacing: 0; --flow-spacing: 0; } .bg--primary { background-color: var(--primary); } .bg--primary-hover { background-color: var(--primary-hover); } .bg--primary-ultra-light { background-color: var(--primary-ultra-light); } .bg--primary-light { background-color: var(--primary-light); } .bg--primary-semi-light { background-color: var(--primary-semi-light); } .bg--primary-semi-dark { background-color: var(--primary-semi-dark); } .bg--primary-dark { background-color: var(--primary-dark); } .bg--primary-ultra-dark { background-color: var(--primary-ultra-dark); } .bg--primary-trans-10 { background-color: var(--primary-trans-10); } .bg--primary-trans-20 { background-color: var(--primary-trans-20); } .bg--primary-trans-30 { background-color: var(--primary-trans-30); } .bg--primary-trans-40 { background-color: var(--primary-trans-40); } .bg--primary-trans-50 { background-color: var(--primary-trans-50); } .bg--primary-trans-60 { background-color: var(--primary-trans-60); } .bg--primary-trans-70 { background-color: var(--primary-trans-70); } .bg--primary-trans-80 { background-color: var(--primary-trans-80); } .bg--primary-trans-90 { background-color: var(--primary-trans-90); } .bg--primary-light-trans-10 { background-color: var(--primary-light-trans-10); } .bg--primary-light-trans-20 { background-color: var(--primary-light-trans-20); } .bg--primary-light-trans-30 { background-color: var(--primary-light-trans-30); } .bg--primary-light-trans-40 { background-color: var(--primary-light-trans-40); } .bg--primary-light-trans-50 { background-color: var(--primary-light-trans-50); } .bg--primary-light-trans-60 { background-color: var(--primary-light-trans-60); } .bg--primary-light-trans-70 { background-color: var(--primary-light-trans-70); } .bg--primary-light-trans-80 { background-color: var(--primary-light-trans-80); } .bg--primary-light-trans-90 { background-color: var(--primary-light-trans-90); } .bg--primary-dark-trans-10 { background-color: var(--primary-dark-trans-10); } .bg--primary-dark-trans-20 { background-color: var(--primary-dark-trans-20); } .bg--primary-dark-trans-30 { background-color: var(--primary-dark-trans-30); } .bg--primary-dark-trans-40 { background-color: var(--primary-dark-trans-40); } .bg--primary-dark-trans-50 { background-color: var(--primary-dark-trans-50); } .bg--primary-dark-trans-60 { background-color: var(--primary-dark-trans-60); } .bg--primary-dark-trans-70 { background-color: var(--primary-dark-trans-70); } .bg--primary-dark-trans-80 { background-color: var(--primary-dark-trans-80); } .bg--primary-dark-trans-90 { background-color: var(--primary-dark-trans-90); } .bg--primary-ultra-dark-trans-10 { background-color: var(--primary-ultra-dark-trans-10); } .bg--primary-ultra-dark-trans-20 { background-color: var(--primary-ultra-dark-trans-20); } .bg--primary-ultra-dark-trans-30 { background-color: var(--primary-ultra-dark-trans-30); } .bg--primary-ultra-dark-trans-40 { background-color: var(--primary-ultra-dark-trans-40); } .bg--primary-ultra-dark-trans-50 { background-color: var(--primary-ultra-dark-trans-50); } .bg--primary-ultra-dark-trans-60 { background-color: var(--primary-ultra-dark-trans-60); } .bg--primary-ultra-dark-trans-70 { background-color: var(--primary-ultra-dark-trans-70); } .bg--primary-ultra-dark-trans-80 { background-color: var(--primary-ultra-dark-trans-80); } .bg--primary-ultra-dark-trans-90 { background-color: var(--primary-ultra-dark-trans-90); } .bg--secondary { background-color: var(--secondary); } .bg--secondary-hover { background-color: var(--secondary-hover); } .bg--secondary-ultra-light { background-color: var(--secondary-ultra-light); } .bg--secondary-light { background-color: var(--secondary-light); } .bg--secondary-semi-light { background-color: var(--secondary-semi-light); } .bg--secondary-semi-dark { background-color: var(--secondary-semi-dark); } .bg--secondary-dark { background-color: var(--secondary-dark); } .bg--secondary-ultra-dark { background-color: var(--secondary-ultra-dark); } .bg--secondary-trans-10 { background-color: var(--secondary-trans-10); } .bg--secondary-trans-20 { background-color: var(--secondary-trans-20); } .bg--secondary-trans-30 { background-color: var(--secondary-trans-30); } .bg--secondary-trans-40 { background-color: var(--secondary-trans-40); } .bg--secondary-trans-50 { background-color: var(--secondary-trans-50); } .bg--secondary-trans-60 { background-color: var(--secondary-trans-60); } .bg--secondary-trans-70 { background-color: var(--secondary-trans-70); } .bg--secondary-trans-80 { background-color: var(--secondary-trans-80); } .bg--secondary-trans-90 { background-color: var(--secondary-trans-90); } .bg--secondary-light-trans-10 { background-color: var(--secondary-light-trans-10); } .bg--secondary-light-trans-20 { background-color: var(--secondary-light-trans-20); } .bg--secondary-light-trans-30 { background-color: var(--secondary-light-trans-30); } .bg--secondary-light-trans-40 { background-color: var(--secondary-light-trans-40); } .bg--secondary-light-trans-50 { background-color: var(--secondary-light-trans-50); } .bg--secondary-light-trans-60 { background-color: var(--secondary-light-trans-60); } .bg--secondary-light-trans-70 { background-color: var(--secondary-light-trans-70); } .bg--secondary-light-trans-80 { background-color: var(--secondary-light-trans-80); } .bg--secondary-light-trans-90 { background-color: var(--secondary-light-trans-90); } .bg--secondary-dark-trans-10 { background-color: var(--secondary-dark-trans-10); } .bg--secondary-dark-trans-20 { background-color: var(--secondary-dark-trans-20); } .bg--secondary-dark-trans-30 { background-color: var(--secondary-dark-trans-30); } .bg--secondary-dark-trans-40 { background-color: var(--secondary-dark-trans-40); } .bg--secondary-dark-trans-50 { background-color: var(--secondary-dark-trans-50); } .bg--secondary-dark-trans-60 { background-color: var(--secondary-dark-trans-60); } .bg--secondary-dark-trans-70 { background-color: var(--secondary-dark-trans-70); } .bg--secondary-dark-trans-80 { background-color: var(--secondary-dark-trans-80); } .bg--secondary-dark-trans-90 { background-color: var(--secondary-dark-trans-90); } .bg--secondary-ultra-dark-trans-10 { background-color: var(--secondary-ultra-dark-trans-10); } .bg--secondary-ultra-dark-trans-20 { background-color: var(--secondary-ultra-dark-trans-20); } .bg--secondary-ultra-dark-trans-30 { background-color: var(--secondary-ultra-dark-trans-30); } .bg--secondary-ultra-dark-trans-40 { background-color: var(--secondary-ultra-dark-trans-40); } .bg--secondary-ultra-dark-trans-50 { background-color: var(--secondary-ultra-dark-trans-50); } .bg--secondary-ultra-dark-trans-60 { background-color: var(--secondary-ultra-dark-trans-60); } .bg--secondary-ultra-dark-trans-70 { background-color: var(--secondary-ultra-dark-trans-70); } .bg--secondary-ultra-dark-trans-80 { background-color: var(--secondary-ultra-dark-trans-80); } .bg--secondary-ultra-dark-trans-90 { background-color: var(--secondary-ultra-dark-trans-90); } .bg--tertiary { background-color: var(--tertiary); } .bg--tertiary-hover { background-color: var(--tertiary-hover); } .bg--tertiary-ultra-light { background-color: var(--tertiary-ultra-light); } .bg--tertiary-light { background-color: var(--tertiary-light); } .bg--tertiary-semi-light { background-color: var(--tertiary-semi-light); } .bg--tertiary-semi-dark { background-color: var(--tertiary-semi-dark); } .bg--tertiary-dark { background-color: var(--tertiary-dark); } .bg--tertiary-ultra-dark { background-color: var(--tertiary-ultra-dark); } .bg--tertiary-trans-10 { background-color: var(--tertiary-trans-10); } .bg--tertiary-trans-20 { background-color: var(--tertiary-trans-20); } .bg--tertiary-trans-30 { background-color: var(--tertiary-trans-30); } .bg--tertiary-trans-40 { background-color: var(--tertiary-trans-40); } .bg--tertiary-trans-50 { background-color: var(--tertiary-trans-50); } .bg--tertiary-trans-60 { background-color: var(--tertiary-trans-60); } .bg--tertiary-trans-70 { background-color: var(--tertiary-trans-70); } .bg--tertiary-trans-80 { background-color: var(--tertiary-trans-80); } .bg--tertiary-trans-90 { background-color: var(--tertiary-trans-90); } .bg--tertiary-light-trans-10 { background-color: var(--tertiary-light-trans-10); } .bg--tertiary-light-trans-20 { background-color: var(--tertiary-light-trans-20); } .bg--tertiary-light-trans-30 { background-color: var(--tertiary-light-trans-30); } .bg--tertiary-light-trans-40 { background-color: var(--tertiary-light-trans-40); } .bg--tertiary-light-trans-50 { background-color: var(--tertiary-light-trans-50); } .bg--tertiary-light-trans-60 { background-color: var(--tertiary-light-trans-60); } .bg--tertiary-light-trans-70 { background-color: var(--tertiary-light-trans-70); } .bg--tertiary-light-trans-80 { background-color: var(--tertiary-light-trans-80); } .bg--tertiary-light-trans-90 { background-color: var(--tertiary-light-trans-90); } .bg--tertiary-dark-trans-10 { background-color: var(--tertiary-dark-trans-10); } .bg--tertiary-dark-trans-20 { background-color: var(--tertiary-dark-trans-20); } .bg--tertiary-dark-trans-30 { background-color: var(--tertiary-dark-trans-30); } .bg--tertiary-dark-trans-40 { background-color: var(--tertiary-dark-trans-40); } .bg--tertiary-dark-trans-50 { background-color: var(--tertiary-dark-trans-50); } .bg--tertiary-dark-trans-60 { background-color: var(--tertiary-dark-trans-60); } .bg--tertiary-dark-trans-70 { background-color: var(--tertiary-dark-trans-70); } .bg--tertiary-dark-trans-80 { background-color: var(--tertiary-dark-trans-80); } .bg--tertiary-dark-trans-90 { background-color: var(--tertiary-dark-trans-90); } .bg--tertiary-ultra-dark-trans-10 { background-color: var(--tertiary-ultra-dark-trans-10); } .bg--tertiary-ultra-dark-trans-20 { background-color: var(--tertiary-ultra-dark-trans-20); } .bg--tertiary-ultra-dark-trans-30 { background-color: var(--tertiary-ultra-dark-trans-30); } .bg--tertiary-ultra-dark-trans-40 { background-color: var(--tertiary-ultra-dark-trans-40); } .bg--tertiary-ultra-dark-trans-50 { background-color: var(--tertiary-ultra-dark-trans-50); } .bg--tertiary-ultra-dark-trans-60 { background-color: var(--tertiary-ultra-dark-trans-60); } .bg--tertiary-ultra-dark-trans-70 { background-color: var(--tertiary-ultra-dark-trans-70); } .bg--tertiary-ultra-dark-trans-80 { background-color: var(--tertiary-ultra-dark-trans-80); } .bg--tertiary-ultra-dark-trans-90 { background-color: var(--tertiary-ultra-dark-trans-90); } .bg--accent { background-color: var(--accent); } .bg--accent-hover { background-color: var(--accent-hover); } .bg--accent-ultra-light { background-color: var(--accent-ultra-light); } .bg--accent-light { background-color: var(--accent-light); } .bg--accent-semi-light { background-color: var(--accent-semi-light); } .bg--accent-semi-dark { background-color: var(--accent-semi-dark); } .bg--accent-dark { background-color: var(--accent-dark); } .bg--accent-ultra-dark { background-color: var(--accent-ultra-dark); } .bg--accent-trans-10 { background-color: var(--accent-trans-10); } .bg--accent-trans-20 { background-color: var(--accent-trans-20); } .bg--accent-trans-30 { background-color: var(--accent-trans-30); } .bg--accent-trans-40 { background-color: var(--accent-trans-40); } .bg--accent-trans-50 { background-color: var(--accent-trans-50); } .bg--accent-trans-60 { background-color: var(--accent-trans-60); } .bg--accent-trans-70 { background-color: var(--accent-trans-70); } .bg--accent-trans-80 { background-color: var(--accent-trans-80); } .bg--accent-trans-90 { background-color: var(--accent-trans-90); } .bg--accent-light-trans-10 { background-color: var(--accent-light-trans-10); } .bg--accent-light-trans-20 { background-color: var(--accent-light-trans-20); } .bg--accent-light-trans-30 { background-color: var(--accent-light-trans-30); } .bg--accent-light-trans-40 { background-color: var(--accent-light-trans-40); } .bg--accent-light-trans-50 { background-color: var(--accent-light-trans-50); } .bg--accent-light-trans-60 { background-color: var(--accent-light-trans-60); } .bg--accent-light-trans-70 { background-color: var(--accent-light-trans-70); } .bg--accent-light-trans-80 { background-color: var(--accent-light-trans-80); } .bg--accent-light-trans-90 { background-color: var(--accent-light-trans-90); } .bg--accent-dark-trans-10 { background-color: var(--accent-dark-trans-10); } .bg--accent-dark-trans-20 { background-color: var(--accent-dark-trans-20); } .bg--accent-dark-trans-30 { background-color: var(--accent-dark-trans-30); } .bg--accent-dark-trans-40 { background-color: var(--accent-dark-trans-40); } .bg--accent-dark-trans-50 { background-color: var(--accent-dark-trans-50); } .bg--accent-dark-trans-60 { background-color: var(--accent-dark-trans-60); } .bg--accent-dark-trans-70 { background-color: var(--accent-dark-trans-70); } .bg--accent-dark-trans-80 { background-color: var(--accent-dark-trans-80); } .bg--accent-dark-trans-90 { background-color: var(--accent-dark-trans-90); } .bg--accent-ultra-dark-trans-10 { background-color: var(--accent-ultra-dark-trans-10); } .bg--accent-ultra-dark-trans-20 { background-color: var(--accent-ultra-dark-trans-20); } .bg--accent-ultra-dark-trans-30 { background-color: var(--accent-ultra-dark-trans-30); } .bg--accent-ultra-dark-trans-40 { background-color: var(--accent-ultra-dark-trans-40); } .bg--accent-ultra-dark-trans-50 { background-color: var(--accent-ultra-dark-trans-50); } .bg--accent-ultra-dark-trans-60 { background-color: var(--accent-ultra-dark-trans-60); } .bg--accent-ultra-dark-trans-70 { background-color: var(--accent-ultra-dark-trans-70); } .bg--accent-ultra-dark-trans-80 { background-color: var(--accent-ultra-dark-trans-80); } .bg--accent-ultra-dark-trans-90 { background-color: var(--accent-ultra-dark-trans-90); } .bg--base { background-color: var(--base); } .bg--base-hover { background-color: var(--base-hover); } .bg--base-ultra-light { background-color: var(--base-ultra-light); } .bg--base-light { background-color: var(--base-light); } .bg--base-semi-light { background-color: var(--base-semi-light); } .bg--base-semi-dark { background-color: var(--base-semi-dark); } .bg--base-dark { background-color: var(--base-dark); } .bg--base-ultra-dark { background-color: var(--base-ultra-dark); } .bg--base-trans-10 { background-color: var(--base-trans-10); } .bg--base-trans-20 { background-color: var(--base-trans-20); } .bg--base-trans-30 { background-color: var(--base-trans-30); } .bg--base-trans-40 { background-color: var(--base-trans-40); } .bg--base-trans-50 { background-color: var(--base-trans-50); } .bg--base-trans-60 { background-color: var(--base-trans-60); } .bg--base-trans-70 { background-color: var(--base-trans-70); } .bg--base-trans-80 { background-color: var(--base-trans-80); } .bg--base-trans-90 { background-color: var(--base-trans-90); } .bg--base-light-trans-10 { background-color: var(--base-light-trans-10); } .bg--base-light-trans-20 { background-color: var(--base-light-trans-20); } .bg--base-light-trans-30 { background-color: var(--base-light-trans-30); } .bg--base-light-trans-40 { background-color: var(--base-light-trans-40); } .bg--base-light-trans-50 { background-color: var(--base-light-trans-50); } .bg--base-light-trans-60 { background-color: var(--base-light-trans-60); } .bg--base-light-trans-70 { background-color: var(--base-light-trans-70); } .bg--base-light-trans-80 { background-color: var(--base-light-trans-80); } .bg--base-light-trans-90 { background-color: var(--base-light-trans-90); } .bg--base-dark-trans-10 { background-color: var(--base-dark-trans-10); } .bg--base-dark-trans-20 { background-color: var(--base-dark-trans-20); } .bg--base-dark-trans-30 { background-color: var(--base-dark-trans-30); } .bg--base-dark-trans-40 { background-color: var(--base-dark-trans-40); } .bg--base-dark-trans-50 { background-color: var(--base-dark-trans-50); } .bg--base-dark-trans-60 { background-color: var(--base-dark-trans-60); } .bg--base-dark-trans-70 { background-color: var(--base-dark-trans-70); } .bg--base-dark-trans-80 { background-color: var(--base-dark-trans-80); } .bg--base-dark-trans-90 { background-color: var(--base-dark-trans-90); } .bg--base-ultra-dark-trans-10 { background-color: var(--base-ultra-dark-trans-10); } .bg--base-ultra-dark-trans-20 { background-color: var(--base-ultra-dark-trans-20); } .bg--base-ultra-dark-trans-30 { background-color: var(--base-ultra-dark-trans-30); } .bg--base-ultra-dark-trans-40 { background-color: var(--base-ultra-dark-trans-40); } .bg--base-ultra-dark-trans-50 { background-color: var(--base-ultra-dark-trans-50); } .bg--base-ultra-dark-trans-60 { background-color: var(--base-ultra-dark-trans-60); } .bg--base-ultra-dark-trans-70 { background-color: var(--base-ultra-dark-trans-70); } .bg--base-ultra-dark-trans-80 { background-color: var(--base-ultra-dark-trans-80); } .bg--base-ultra-dark-trans-90 { background-color: var(--base-ultra-dark-trans-90); } .bg--neutral { background-color: var(--neutral); } .bg--neutral-hover { background-color: var(--neutral-hover); } .bg--neutral-ultra-light { background-color: var(--neutral-ultra-light); } .bg--neutral-light { background-color: var(--neutral-light); } .bg--neutral-semi-light { background-color: var(--neutral-semi-light); } .bg--neutral-semi-dark { background-color: var(--neutral-semi-dark); } .bg--neutral-dark { background-color: var(--neutral-dark); } .bg--neutral-ultra-dark { background-color: var(--neutral-ultra-dark); } .bg--neutral-trans-10 { background-color: var(--neutral-trans-10); } .bg--neutral-trans-20 { background-color: var(--neutral-trans-20); } .bg--neutral-trans-30 { background-color: var(--neutral-trans-30); } .bg--neutral-trans-40 { background-color: var(--neutral-trans-40); } .bg--neutral-trans-50 { background-color: var(--neutral-trans-50); } .bg--neutral-trans-60 { background-color: var(--neutral-trans-60); } .bg--neutral-trans-70 { background-color: var(--neutral-trans-70); } .bg--neutral-trans-80 { background-color: var(--neutral-trans-80); } .bg--neutral-trans-90 { background-color: var(--neutral-trans-90); } .bg--neutral-light-trans-10 { background-color: var(--neutral-light-trans-10); } .bg--neutral-light-trans-20 { background-color: var(--neutral-light-trans-20); } .bg--neutral-light-trans-30 { background-color: var(--neutral-light-trans-30); } .bg--neutral-light-trans-40 { background-color: var(--neutral-light-trans-40); } .bg--neutral-light-trans-50 { background-color: var(--neutral-light-trans-50); } .bg--neutral-light-trans-60 { background-color: var(--neutral-light-trans-60); } .bg--neutral-light-trans-70 { background-color: var(--neutral-light-trans-70); } .bg--neutral-light-trans-80 { background-color: var(--neutral-light-trans-80); } .bg--neutral-light-trans-90 { background-color: var(--neutral-light-trans-90); } .bg--neutral-dark-trans-10 { background-color: var(--neutral-dark-trans-10); } .bg--neutral-dark-trans-20 { background-color: var(--neutral-dark-trans-20); } .bg--neutral-dark-trans-30 { background-color: var(--neutral-dark-trans-30); } .bg--neutral-dark-trans-40 { background-color: var(--neutral-dark-trans-40); } .bg--neutral-dark-trans-50 { background-color: var(--neutral-dark-trans-50); } .bg--neutral-dark-trans-60 { background-color: var(--neutral-dark-trans-60); } .bg--neutral-dark-trans-70 { background-color: var(--neutral-dark-trans-70); } .bg--neutral-dark-trans-80 { background-color: var(--neutral-dark-trans-80); } .bg--neutral-dark-trans-90 { background-color: var(--neutral-dark-trans-90); } .bg--neutral-ultra-dark-trans-10 { background-color: var(--neutral-ultra-dark-trans-10); } .bg--neutral-ultra-dark-trans-20 { background-color: var(--neutral-ultra-dark-trans-20); } .bg--neutral-ultra-dark-trans-30 { background-color: var(--neutral-ultra-dark-trans-30); } .bg--neutral-ultra-dark-trans-40 { background-color: var(--neutral-ultra-dark-trans-40); } .bg--neutral-ultra-dark-trans-50 { background-color: var(--neutral-ultra-dark-trans-50); } .bg--neutral-ultra-dark-trans-60 { background-color: var(--neutral-ultra-dark-trans-60); } .bg--neutral-ultra-dark-trans-70 { background-color: var(--neutral-ultra-dark-trans-70); } .bg--neutral-ultra-dark-trans-80 { background-color: var(--neutral-ultra-dark-trans-80); } .bg--neutral-ultra-dark-trans-90 { background-color: var(--neutral-ultra-dark-trans-90); } .bg--white { background-color: var(--white); } .bg--black { background-color: var(--black); } .bg--white-trans-10 { background-color: var(--white-trans-10); } .bg--white-trans-20 { background-color: var(--white-trans-20); } .bg--white-trans-30 { background-color: var(--white-trans-30); } .bg--white-trans-40 { background-color: var(--white-trans-40); } .bg--white-trans-50 { background-color: var(--white-trans-50); } .bg--white-trans-60 { background-color: var(--white-trans-60); } .bg--white-trans-70 { background-color: var(--white-trans-70); } .bg--white-trans-80 { background-color: var(--white-trans-80); } .bg--white-trans-90 { background-color: var(--white-trans-90); } .bg--black-trans-10 { background-color: var(--black-trans-10); } .bg--black-trans-20 { background-color: var(--black-trans-20); } .bg--black-trans-30 { background-color: var(--black-trans-30); } .bg--black-trans-40 { background-color: var(--black-trans-40); } .bg--black-trans-50 { background-color: var(--black-trans-50); } .bg--black-trans-60 { background-color: var(--black-trans-60); } .bg--black-trans-70 { background-color: var(--black-trans-70); } .bg--black-trans-80 { background-color: var(--black-trans-80); } .bg--black-trans-90 { background-color: var(--black-trans-90); } :has(> .is-bg) { position: relative; isolation: isolate; } :is(*, img, figure, picture).is-bg { position: var(--bg-position, absolute); inset: var(--bg-inset, 0); inline-size: var(--bg-width, 100%); block-size: var(--bg-height, 100%); border-radius: var(--bg-radius, 0); object-fit: var(--bg-object-fit, cover); object-position: var(--bg-object-position, center); z-index: var(--bg-z-index, -2); border-radius: var(--bg-radius, 0); } :is(*, img, figure, picture).is-bg > img { object-fit: var(--bg-object-fit, cover); object-position: var(--bg-object-position, center); } .content-grid > :is(*, img, figure, picture).is-bg { grid-column: full; } .bg--ultra-light { background-color: var(--bg-ultra-light); } .bg--light { background-color: var(--bg-light); } .bg--dark { background-color: var(--bg-dark); } .bg--ultra-dark { background-color: var(--bg-ultra-dark); } .text--light.text--light, .text--light.text--light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--text-light); } .text--light-muted.text--light-muted, .text--light-muted.text--light-muted :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--text-light-muted); } .text--dark.text--dark, .text--dark.text--dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--text-dark); } .text--dark-muted.text--dark-muted, .text--dark-muted.text--dark-muted :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--text-dark-muted); } .content-grid { --full: minmax(var(--gutter), 1fr); padding-inline: 0; column-gap: 0 !important; display: grid !important; grid-template-columns: [full-start] var(--full) [feature-max-start] minmax(0, var(--feature-max-width, 100px)) [feature-start] minmax(0, var(--feature-width, 50px)) [content-start] min(var(--content-width), 100% - var(--gutter) * 2) [content-end] minmax(0, var(--feature-width, 50px)) [feature-end] minmax(0, var(--feature-max-width, 100px)) [feature-max-end] var(--full) [full-end]; } .content-grid > :not(.content--feature, .content--feature-max, .content--full, .content--full-safe) { width: 100%; } .content-grid > :where(:not(.content--feature, .content--feature-max, .content--full, .content--full-safe)) { grid-column: content; } .content--feature { grid-column: feature; } .content--feature-max { grid-column: feature-max; } .content--full { grid-column: full; } .content--full-safe { grid-column: full; padding-inline: var(--gutter); } .content-grid:where(.content--full-safe) { padding-inline: var(--gutter); } :is(.content--feature, .content--feature-max, .content--full, .content--full-safe):not(.content-grid--off :is(.content--feature, .content--feature-max, .content--full, .content--full-safe)) { width: 100% !important; max-width: 100%; } .content-grid:is([class*="padding--"], [class*="section--"], [class*="header--"]) { padding-inline: 0; } :root, .color-scheme--main { --bg-ultra-light-text: var(--text-dark); --bg-light-text: var(--text-dark); --bg-dark-text: var(--text-light); --bg-ultra-dark-text: var(--text-light); --bg-ultra-light-heading: var(--text-dark); --bg-light-heading: var(--text-dark); --bg-dark-heading: var(--text-light); --bg-ultra-dark-heading: var(--text-light); } .color-scheme--alt { --bg-ultra-light-text: var(--text-dark); --bg-light-text: var(--text-dark); --bg-dark-text: var(--text-light); --bg-ultra-dark-text: var(--text-light); --bg-ultra-light-heading: var(--text-dark); --bg-light-heading: var(--text-dark); --bg-dark-heading: var(--text-light); --bg-ultra-dark-heading: var(--text-light); --bg-ultra-dark-text: var(--text-light); } :where(.bg--ultra-light), :where(.bg--ultra-light) :is(h1, h2, h3, h4, h5, h6) { color: var(--bg-ultra-light-text); } :where(.bg--light), :where(.bg--light) :is(h1, h2, h3, h4, h5, h6) { color: var(--bg-light-text); } :where(.bg--dark), :where(.bg--dark) :is(h1, h2, h3, h4, h5, h6) { color: var(--bg-dark-text); } :where(.bg--ultra-dark), :where(.bg--ultra-dark) :is(h1, h2, h3, h4, h5, h6) { color: var(--bg-ultra-dark-text); } .bg--ultra-light :where(h1, h2, h3, h4, h5, h6) { --heading-color: var(--bg-ultra-light-heading); --h1-color: var(--bg-ultra-light-heading); --h2-color: var(--bg-ultra-light-heading); --h3-color: var(--bg-ultra-light-heading); --h4-color: var(--bg-ultra-light-heading); --h5-color: var(--bg-ultra-light-heading); --h6-color: var(--bg-ultra-light-heading); color: var(--bg-ultra-light-heading); } .bg--light :where(h1, h2, h3, h4, h5, h6) { --heading-color: var(--bg-light-heading); --h1-color: var(--bg-light-heading); --h2-color: var(--bg-light-heading); --h3-color: var(--bg-light-heading); --h4-color: var(--bg-light-heading); --h5-color: var(--bg-light-heading); --h6-color: var(--bg-light-heading); color: var(--bg-light-heading); } .bg--dark :where(h1, h2, h3, h4, h5, h6) { --heading-color: var(--bg-dark-heading); --h1-color: var(--bg-dark-heading); --h2-color: var(--bg-dark-heading); --h3-color: var(--bg-dark-heading); --h4-color: var(--bg-dark-heading); --h5-color: var(--bg-dark-heading); --h6-color: var(--bg-dark-heading); color: var(--bg-dark-heading); } .bg--ultra-dark :where(h1, h2, h3, h4, h5, h6) { --heading-color: var(--bg-ultra-dark-heading); --h1-color: var(--bg-ultra-dark-heading); --h2-color: var(--bg-ultra-dark-heading); --h3-color: var(--bg-ultra-dark-heading); --h4-color: var(--bg-ultra-dark-heading); --h5-color: var(--bg-ultra-dark-heading); --h6-color: var(--bg-ultra-dark-heading); color: var(--bg-ultra-dark-heading); } .bg--ultra-light [class*="btn--"] { --btn-background: var(--primary); --btn-background-hover: var(--primary-hover); --btn-text-color: var(--primary-ultra-light); --btn-text-color-hover: var(--primary-ultra-light); --btn-border-color: var(--primary); --btn-border-color-hover: var(--primary-hover); --focus-color: var(--primary-light); } .bg--ultra-light [class*="btn--"].btn--outline { --btn-background: transparent; --btn-background-hover: var(--primary-hover); --btn-text-color: var(--primary); --btn-text-color-hover: var(--primary-ultra-light); --btn-border-width: 2px; --btn-border-color: var(--primary); --btn-border-color-hover: var(--primary-hover); --focus-color: var(--primary-light); } .bg--light [class*="btn--"] { --btn-background: var(--primary); --btn-background-hover: var(--primary-hover); --btn-text-color: var(--primary-ultra-light); --btn-text-color-hover: var(--primary-ultra-light); --btn-border-color: var(--primary); --btn-border-color-hover: var(--primary-hover); --focus-color: var(--primary-light); } .bg--light [class*="btn--"].btn--outline { --btn-background: transparent; --btn-background-hover: var(--primary-hover); --btn-text-color: var(--primary); --btn-text-color-hover: var(--primary-ultra-light); --btn-border-width: 2px; --btn-border-color: var(--primary); --btn-border-color-hover: var(--primary-hover); --focus-color: var(--primary-light); } .bg--dark [class*="btn--"] { --btn-background: var(--primary); --btn-background-hover: var(--primary-hover); --btn-text-color: var(--primary-ultra-light); --btn-text-color-hover: var(--primary-ultra-light); --btn-border-color: var(--primary); --btn-border-color-hover: var(--primary-hover); --focus-color: var(--primary-light); } .bg--dark [class*="btn--"].btn--outline { --btn-background: transparent; --btn-background-hover: var(--primary-hover); --btn-text-color: var(--primary); --btn-text-color-hover: var(--primary-ultra-light); --btn-border-width: 2px; --btn-border-color: var(--primary); --btn-border-color-hover: var(--primary-hover); --focus-color: var(--primary-light); } .bg--ultra-dark [class*="btn--"] { --btn-background: var(--primary); --btn-background-hover: var(--primary-hover); --btn-text-color: var(--primary-ultra-light); --btn-text-color-hover: var(--primary-ultra-light); --btn-border-color: var(--primary); --btn-border-color-hover: var(--primary-hover); --focus-color: var(--primary-light); } .bg--ultra-dark [class*="btn--"].btn--outline { --btn-background: transparent; --btn-background-hover: var(--primary-hover); --btn-text-color: var(--primary); --btn-text-color-hover: var(--primary-ultra-light); --btn-border-width: 2px; --btn-border-color: var(--primary); --btn-border-color-hover: var(--primary-hover); --focus-color: var(--primary-light); } .margin-top--xs { margin-block-start: var(--space-xs); } .margin-top--s { margin-block-start: var(--space-s); } .margin-top--m { margin-block-start: var(--space-m); } .margin-top--l { margin-block-start: var(--space-l); } .margin-top--xl { margin-block-start: var(--space-xl); } .margin-top--xxl { margin-block-start: var(--space-xxl); } .margin-right--xs { margin-inline-end: var(--space-xs); } .margin-right--s { margin-inline-end: var(--space-s); } .margin-right--m { margin-inline-end: var(--space-m); } .margin-right--l { margin-inline-end: var(--space-l); } .margin-right--xl { margin-inline-end: var(--space-xl); } .margin-right--xxl { margin-inline-end: var(--space-xxl); } .margin-bottom--xs { margin-block-end: var(--space-xs); } .margin-bottom--s { margin-block-end: var(--space-s); } .margin-bottom--m { margin-block-end: var(--space-m); } .margin-bottom--l { margin-block-end: var(--space-l); } .margin-bottom--xl { margin-block-end: var(--space-xl); } .margin-bottom--xxl { margin-block-end: var(--space-xxl); } .margin-left--xs { margin-inline-start: var(--space-xs); } .margin-left--s { margin-inline-start: var(--space-s); } .margin-left--m { margin-inline-start: var(--space-m); } .margin-left--l { margin-inline-start: var(--space-l); } .margin-left--xl { margin-inline-start: var(--space-xl); } .margin-left--xxl { margin-inline-start: var(--space-xxl); } .margin-block--xs { margin-block: var(--space-xs); } .margin-block--s { margin-block: var(--space-s); } .margin-block--m { margin-block: var(--space-m); } .margin-block--l { margin-block: var(--space-l); } .margin-block--xl { margin-block: var(--space-xl); } .margin-block--xxl { margin-block: var(--space-xxl); } .margin-inline--xs { margin-inline: var(--space-xs); } .margin-inline--s { margin-inline: var(--space-s); } .margin-inline--m { margin-inline: var(--space-m); } .margin-inline--l { margin-inline: var(--space-l); } .margin-inline--xl { margin-inline: var(--space-xl); } .margin-inline--xxl { margin-inline: var(--space-xxl); } .margin--none { padding: 0; } @media (max-width: 1366px) { .margin-top--xs-xl { margin-block-start: var(--space-xs); } .margin-top--s-xl { margin-block-start: var(--space-s); } .margin-top--m-xl { margin-block-start: var(--space-m); } .margin-top--l-xl { margin-block-start: var(--space-l); } .margin-top--xl-xl { margin-block-start: var(--space-xl); } .margin-top--xxl-xl { margin-block-start: var(--space-xxl); } .margin-right--xs-xl { margin-inline-end: var(--space-xs); } .margin-right--s-xl { margin-inline-end: var(--space-s); } .margin-right--m-xl { margin-inline-end: var(--space-m); } .margin-right--l-xl { margin-inline-end: var(--space-l); } .margin-right--xl-xl { margin-inline-end: var(--space-xl); } .margin-right--xxl-xl { margin-inline-end: var(--space-xxl); } .margin-bottom--xs-xl { margin-block-end: var(--space-xs); } .margin-bottom--s-xl { margin-block-end: var(--space-s); } .margin-bottom--m-xl { margin-block-end: var(--space-m); } .margin-bottom--l-xl { margin-block-end: var(--space-l); } .margin-bottom--xl-xl { margin-block-end: var(--space-xl); } .margin-bottom--xxl-xl { margin-block-end: var(--space-xxl); } .margin-left--xs-xl { margin-inline-start: var(--space-xs); } .margin-left--s-xl { margin-inline-start: var(--space-s); } .margin-left--m-xl { margin-inline-start: var(--space-m); } .margin-left--l-xl { margin-inline-start: var(--space-l); } .margin-left--xl-xl { margin-inline-start: var(--space-xl); } .margin-left--xxl-xl { margin-inline-start: var(--space-xxl); } .margin-block--xs-xl { margin-block: var(--space-xs); } .margin-block--s-xl { margin-block: var(--space-s); } .margin-block--m-xl { margin-block: var(--space-m); } .margin-block--l-xl { margin-block: var(--space-l); } .margin-block--xl-xl { margin-block: var(--space-xl); } .margin-block--xxl-xl { margin-block: var(--space-xxl); } .margin-inline--xs-xl { margin-inline: var(--space-xs); } .margin-inline--s-xl { margin-inline: var(--space-s); } .margin-inline--m-xl { margin-inline: var(--space-m); } .margin-inline--l-xl { margin-inline: var(--space-l); } .margin-inline--xl-xl { margin-inline: var(--space-xl); } .margin-inline--xxl-xl { margin-inline: var(--space-xxl); } .margin--xl-none { padding: 0; } } @media (max-width: 992px) { .margin-top--xs-l { margin-block-start: var(--space-xs); } .margin-top--s-l { margin-block-start: var(--space-s); } .margin-top--m-l { margin-block-start: var(--space-m); } .margin-top--l-l { margin-block-start: var(--space-l); } .margin-top--xl-l { margin-block-start: var(--space-xl); } .margin-top--xxl-l { margin-block-start: var(--space-xxl); } .margin-right--xs-l { margin-inline-end: var(--space-xs); } .margin-right--s-l { margin-inline-end: var(--space-s); } .margin-right--m-l { margin-inline-end: var(--space-m); } .margin-right--l-l { margin-inline-end: var(--space-l); } .margin-right--xl-l { margin-inline-end: var(--space-xl); } .margin-right--xxl-l { margin-inline-end: var(--space-xxl); } .margin-bottom--xs-l { margin-block-end: var(--space-xs); } .margin-bottom--s-l { margin-block-end: var(--space-s); } .margin-bottom--m-l { margin-block-end: var(--space-m); } .margin-bottom--l-l { margin-block-end: var(--space-l); } .margin-bottom--xl-l { margin-block-end: var(--space-xl); } .margin-bottom--xxl-l { margin-block-end: var(--space-xxl); } .margin-left--xs-l { margin-inline-start: var(--space-xs); } .margin-left--s-l { margin-inline-start: var(--space-s); } .margin-left--m-l { margin-inline-start: var(--space-m); } .margin-left--l-l { margin-inline-start: var(--space-l); } .margin-left--xl-l { margin-inline-start: var(--space-xl); } .margin-left--xxl-l { margin-inline-start: var(--space-xxl); } .margin-block--xs-l { margin-block: var(--space-xs); } .margin-block--s-l { margin-block: var(--space-s); } .margin-block--m-l { margin-block: var(--space-m); } .margin-block--l-l { margin-block: var(--space-l); } .margin-block--xl-l { margin-block: var(--space-xl); } .margin-block--xxl-l { margin-block: var(--space-xxl); } .margin-inline--xs-l { margin-inline: var(--space-xs); } .margin-inline--s-l { margin-inline: var(--space-s); } .margin-inline--m-l { margin-inline: var(--space-m); } .margin-inline--l-l { margin-inline: var(--space-l); } .margin-inline--xl-l { margin-inline: var(--space-xl); } .margin-inline--xxl-l { margin-inline: var(--space-xxl); } .margin--l-none { padding: 0; } } @media (max-width: 768px) { .margin-top--xs-m { margin-block-start: var(--space-xs); } .margin-top--s-m { margin-block-start: var(--space-s); } .margin-top--m-m { margin-block-start: var(--space-m); } .margin-top--l-m { margin-block-start: var(--space-l); } .margin-top--xl-m { margin-block-start: var(--space-xl); } .margin-top--xxl-m { margin-block-start: var(--space-xxl); } .margin-right--xs-m { margin-inline-end: var(--space-xs); } .margin-right--s-m { margin-inline-end: var(--space-s); } .margin-right--m-m { margin-inline-end: var(--space-m); } .margin-right--l-m { margin-inline-end: var(--space-l); } .margin-right--xl-m { margin-inline-end: var(--space-xl); } .margin-right--xxl-m { margin-inline-end: var(--space-xxl); } .margin-bottom--xs-m { margin-block-end: var(--space-xs); } .margin-bottom--s-m { margin-block-end: var(--space-s); } .margin-bottom--m-m { margin-block-end: var(--space-m); } .margin-bottom--l-m { margin-block-end: var(--space-l); } .margin-bottom--xl-m { margin-block-end: var(--space-xl); } .margin-bottom--xxl-m { margin-block-end: var(--space-xxl); } .margin-left--xs-m { margin-inline-start: var(--space-xs); } .margin-left--s-m { margin-inline-start: var(--space-s); } .margin-left--m-m { margin-inline-start: var(--space-m); } .margin-left--l-m { margin-inline-start: var(--space-l); } .margin-left--xl-m { margin-inline-start: var(--space-xl); } .margin-left--xxl-m { margin-inline-start: var(--space-xxl); } .margin-block--xs-m { margin-block: var(--space-xs); } .margin-block--s-m { margin-block: var(--space-s); } .margin-block--m-m { margin-block: var(--space-m); } .margin-block--l-m { margin-block: var(--space-l); } .margin-block--xl-m { margin-block: var(--space-xl); } .margin-block--xxl-m { margin-block: var(--space-xxl); } .margin-inline--xs-m { margin-inline: var(--space-xs); } .margin-inline--s-m { margin-inline: var(--space-s); } .margin-inline--m-m { margin-inline: var(--space-m); } .margin-inline--l-m { margin-inline: var(--space-l); } .margin-inline--xl-m { margin-inline: var(--space-xl); } .margin-inline--xxl-m { margin-inline: var(--space-xxl); } .margin--m-none { padding: 0; } } @media (max-width: 480px) { .margin-top--xs-s { margin-block-start: var(--space-xs); } .margin-top--s-s { margin-block-start: var(--space-s); } .margin-top--m-s { margin-block-start: var(--space-m); } .margin-top--l-s { margin-block-start: var(--space-l); } .margin-top--xl-s { margin-block-start: var(--space-xl); } .margin-top--xxl-s { margin-block-start: var(--space-xxl); } .margin-right--xs-s { margin-inline-end: var(--space-xs); } .margin-right--s-s { margin-inline-end: var(--space-s); } .margin-right--m-s { margin-inline-end: var(--space-m); } .margin-right--l-s { margin-inline-end: var(--space-l); } .margin-right--xl-s { margin-inline-end: var(--space-xl); } .margin-right--xxl-s { margin-inline-end: var(--space-xxl); } .margin-bottom--xs-s { margin-block-end: var(--space-xs); } .margin-bottom--s-s { margin-block-end: var(--space-s); } .margin-bottom--m-s { margin-block-end: var(--space-m); } .margin-bottom--l-s { margin-block-end: var(--space-l); } .margin-bottom--xl-s { margin-block-end: var(--space-xl); } .margin-bottom--xxl-s { margin-block-end: var(--space-xxl); } .margin-left--xs-s { margin-inline-start: var(--space-xs); } .margin-left--s-s { margin-inline-start: var(--space-s); } .margin-left--m-s { margin-inline-start: var(--space-m); } .margin-left--l-s { margin-inline-start: var(--space-l); } .margin-left--xl-s { margin-inline-start: var(--space-xl); } .margin-left--xxl-s { margin-inline-start: var(--space-xxl); } .margin-block--xs-s { margin-block: var(--space-xs); } .margin-block--s-s { margin-block: var(--space-s); } .margin-block--m-s { margin-block: var(--space-m); } .margin-block--l-s { margin-block: var(--space-l); } .margin-block--xl-s { margin-block: var(--space-xl); } .margin-block--xxl-s { margin-block: var(--space-xxl); } .margin-inline--xs-s { margin-inline: var(--space-xs); } .margin-inline--s-s { margin-inline: var(--space-s); } .margin-inline--m-s { margin-inline: var(--space-m); } .margin-inline--l-s { margin-inline: var(--space-l); } .margin-inline--xl-s { margin-inline: var(--space-xl); } .margin-inline--xxl-s { margin-inline: var(--space-xxl); } .margin--s-none { padding: 0; } } .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--xxl { padding: var(--space-xxl); } .padding--none { padding: 0; } @media (max-width: 1366px) { .padding--xl-xs { padding: var(--space-xs); } .padding--xl-s { padding: var(--space-s); } .padding--xl-m { padding: var(--space-m); } .padding--xl-l { padding: var(--space-l); } .padding--xl-xl { padding: var(--space-xl); } .padding--xl-xxl { padding: var(--space-xxl); } .padding--xl-none { padding: 0; } } @media (max-width: 992px) { .padding--l-xs { padding: var(--space-xs); } .padding--l-s { padding: var(--space-s); } .padding--l-m { padding: var(--space-m); } .padding--l-l { padding: var(--space-l); } .padding--l-xl { padding: var(--space-xl); } .padding--l-xxl { padding: var(--space-xxl); } .padding--l-none { padding: 0; } } @media (max-width: 768px) { .padding--m-xs { padding: var(--space-xs); } .padding--m-s { padding: var(--space-s); } .padding--m-m { padding: var(--space-m); } .padding--m-l { padding: var(--space-l); } .padding--m-xl { padding: var(--space-xl); } .padding--m-xxl { padding: var(--space-xxl); } .padding--m-none { padding: 0; } } @media (max-width: 480px) { .padding--s-xs { padding: var(--space-xs); } .padding--s-s { padding: var(--space-s); } .padding--s-m { padding: var(--space-m); } .padding--s-l { padding: var(--space-l); } .padding--s-xl { padding: var(--space-xl); } .padding--s-xxl { padding: var(--space-xxl); } .padding--s-none { padding: 0; } } .header--xs { padding-block: var(--space-xs); padding-inline: var(--gutter); } .header--s { padding-block: var(--space-s); padding-inline: var(--gutter); } .header--m { padding-block: var(--space-m); padding-inline: var(--gutter); } .header--l { padding-block: var(--space-l); padding-inline: var(--gutter); } .header--xl { padding-block: var(--space-xl); padding-inline: var(--gutter); } .header--xxl { padding-block: var(--space-xxl); padding-inline: var(--gutter); } .section--xs { padding-block: var(--section-space-xs); padding-inline: var(--gutter); } .section--s { padding-block: var(--section-space-s); padding-inline: var(--gutter); } .section--m { padding-block: var(--section-space-m); padding-inline: var(--gutter); } .section--l { padding-block: var(--section-space-l); padding-inline: var(--gutter); } .section--xl { padding-block: var(--section-space-xl); padding-inline: var(--gutter); } .section--xxl { padding-block: var(--section-space-xxl); padding-inline: var(--gutter); } .section--none { padding-block: 0; padding-inline: var(--gutter); } @media (max-width: 1366px) { .section--xl-xs { padding-block: var(--section-space-xs); padding-inline: var(--gutter); } .section--xl-s { padding-block: var(--section-space-s); padding-inline: var(--gutter); } .section--xl-m { padding-block: var(--section-space-m); padding-inline: var(--gutter); } .section--xl-l { padding-block: var(--section-space-l); padding-inline: var(--gutter); } .section--xl-xl { padding-block: var(--section-space-xl); padding-inline: var(--gutter); } .section--xl-xxl { padding-block: var(--section-space-xxl); padding-inline: var(--gutter); } .section--xl-none { padding-inline: 0 var(--gutter); } } @media (max-width: 992px) { .section--l-xs { padding-block: var(--section-space-xs); padding-inline: var(--gutter); } .section--l-s { padding-block: var(--section-space-s); padding-inline: var(--gutter); } .section--l-m { padding-block: var(--section-space-m); padding-inline: var(--gutter); } .section--l-l { padding-block: var(--section-space-l); padding-inline: var(--gutter); } .section--l-xl { padding-block: var(--section-space-xl); padding-inline: var(--gutter); } .section--l-xxl { padding-block: var(--section-space-xxl); padding-inline: var(--gutter); } .section--l-none { padding-inline: 0 var(--gutter); } } @media (max-width: 768px) { .section--m-xs { padding-block: var(--section-space-xs); padding-inline: var(--gutter); } .section--m-s { padding-block: var(--section-space-s); padding-inline: var(--gutter); } .section--m-m { padding-block: var(--section-space-m); padding-inline: var(--gutter); } .section--m-l { padding-block: var(--section-space-l); padding-inline: var(--gutter); } .section--m-xl { padding-block: var(--section-space-xl); padding-inline: var(--gutter); } .section--m-xxl { padding-block: var(--section-space-xxl); padding-inline: var(--gutter); } .section--m-none { padding-inline: 0 var(--gutter); } } @media (max-width: 480px) { .section--s-xs { padding-block: var(--section-space-xs); padding-inline: var(--gutter); } .section--s-s { padding-block: var(--section-space-s); padding-inline: var(--gutter); } .section--s-m { padding-block: var(--section-space-m); padding-inline: var(--gutter); } .section--s-l { padding-block: var(--section-space-l); padding-inline: var(--gutter); } .section--s-xl { padding-block: var(--section-space-xl); padding-inline: var(--gutter); } .section--s-xxl { padding-block: var(--section-space-xxl); padding-inline: var(--gutter); } .section--s-none { padding-inline: 0 var(--gutter); } } .section__inner, .section__container, .acss__container { width: 100%; max-inline-size: var(--content-width); margin-inline: auto; } [class*="overlay--"] { position: relative; z-index: 0; } [class*="overlay--"]::before { content: ""; background: var(--overlay-background); position: absolute; inset: 0; z-index: -1; } .overlay--primary-trans-10 { --overlay-background: var(--primary-trans-10); } .overlay--primary-trans-20 { --overlay-background: var(--primary-trans-20); } .overlay--primary-trans-30 { --overlay-background: var(--primary-trans-30); } .overlay--primary-trans-40 { --overlay-background: var(--primary-trans-40); } .overlay--primary-trans-50 { --overlay-background: var(--primary-trans-50); } .overlay--primary-trans-60 { --overlay-background: var(--primary-trans-60); } .overlay--primary-trans-70 { --overlay-background: var(--primary-trans-70); } .overlay--primary-trans-80 { --overlay-background: var(--primary-trans-80); } .overlay--primary-trans-90 { --overlay-background: var(--primary-trans-90); } .overlay--primary-light-trans-10 { --overlay-background: var(--primary-light-trans-10); } .overlay--primary-light-trans-20 { --overlay-background: var(--primary-light-trans-20); } .overlay--primary-light-trans-30 { --overlay-background: var(--primary-light-trans-30); } .overlay--primary-light-trans-40 { --overlay-background: var(--primary-light-trans-40); } .overlay--primary-light-trans-50 { --overlay-background: var(--primary-light-trans-50); } .overlay--primary-light-trans-60 { --overlay-background: var(--primary-light-trans-60); } .overlay--primary-light-trans-70 { --overlay-background: var(--primary-light-trans-70); } .overlay--primary-light-trans-80 { --overlay-background: var(--primary-light-trans-80); } .overlay--primary-light-trans-90 { --overlay-background: var(--primary-light-trans-90); } .overlay--primary-dark-trans-10 { --overlay-background: var(--primary-dark-trans-10); } .overlay--primary-dark-trans-20 { --overlay-background: var(--primary-dark-trans-20); } .overlay--primary-dark-trans-30 { --overlay-background: var(--primary-dark-trans-30); } .overlay--primary-dark-trans-40 { --overlay-background: var(--primary-dark-trans-40); } .overlay--primary-dark-trans-50 { --overlay-background: var(--primary-dark-trans-50); } .overlay--primary-dark-trans-60 { --overlay-background: var(--primary-dark-trans-60); } .overlay--primary-dark-trans-70 { --overlay-background: var(--primary-dark-trans-70); } .overlay--primary-dark-trans-80 { --overlay-background: var(--primary-dark-trans-80); } .overlay--primary-dark-trans-90 { --overlay-background: var(--primary-dark-trans-90); } .overlay--primary-ultra-dark-trans-10 { --overlay-background: var(--primary-ultra-dark-trans-10); } .overlay--primary-ultra-dark-trans-20 { --overlay-background: var(--primary-ultra-dark-trans-20); } .overlay--primary-ultra-dark-trans-30 { --overlay-background: var(--primary-ultra-dark-trans-30); } .overlay--primary-ultra-dark-trans-40 { --overlay-background: var(--primary-ultra-dark-trans-40); } .overlay--primary-ultra-dark-trans-50 { --overlay-background: var(--primary-ultra-dark-trans-50); } .overlay--primary-ultra-dark-trans-60 { --overlay-background: var(--primary-ultra-dark-trans-60); } .overlay--primary-ultra-dark-trans-70 { --overlay-background: var(--primary-ultra-dark-trans-70); } .overlay--primary-ultra-dark-trans-80 { --overlay-background: var(--primary-ultra-dark-trans-80); } .overlay--primary-ultra-dark-trans-90 { --overlay-background: var(--primary-ultra-dark-trans-90); } .overlay--secondary-trans-10 { --overlay-background: var(--secondary-trans-10); } .overlay--secondary-trans-20 { --overlay-background: var(--secondary-trans-20); } .overlay--secondary-trans-30 { --overlay-background: var(--secondary-trans-30); } .overlay--secondary-trans-40 { --overlay-background: var(--secondary-trans-40); } .overlay--secondary-trans-50 { --overlay-background: var(--secondary-trans-50); } .overlay--secondary-trans-60 { --overlay-background: var(--secondary-trans-60); } .overlay--secondary-trans-70 { --overlay-background: var(--secondary-trans-70); } .overlay--secondary-trans-80 { --overlay-background: var(--secondary-trans-80); } .overlay--secondary-trans-90 { --overlay-background: var(--secondary-trans-90); } .overlay--secondary-light-trans-10 { --overlay-background: var(--secondary-light-trans-10); } .overlay--secondary-light-trans-20 { --overlay-background: var(--secondary-light-trans-20); } .overlay--secondary-light-trans-30 { --overlay-background: var(--secondary-light-trans-30); } .overlay--secondary-light-trans-40 { --overlay-background: var(--secondary-light-trans-40); } .overlay--secondary-light-trans-50 { --overlay-background: var(--secondary-light-trans-50); } .overlay--secondary-light-trans-60 { --overlay-background: var(--secondary-light-trans-60); } .overlay--secondary-light-trans-70 { --overlay-background: var(--secondary-light-trans-70); } .overlay--secondary-light-trans-80 { --overlay-background: var(--secondary-light-trans-80); } .overlay--secondary-light-trans-90 { --overlay-background: var(--secondary-light-trans-90); } .overlay--secondary-dark-trans-10 { --overlay-background: var(--secondary-dark-trans-10); } .overlay--secondary-dark-trans-20 { --overlay-background: var(--secondary-dark-trans-20); } .overlay--secondary-dark-trans-30 { --overlay-background: var(--secondary-dark-trans-30); } .overlay--secondary-dark-trans-40 { --overlay-background: var(--secondary-dark-trans-40); } .overlay--secondary-dark-trans-50 { --overlay-background: var(--secondary-dark-trans-50); } .overlay--secondary-dark-trans-60 { --overlay-background: var(--secondary-dark-trans-60); } .overlay--secondary-dark-trans-70 { --overlay-background: var(--secondary-dark-trans-70); } .overlay--secondary-dark-trans-80 { --overlay-background: var(--secondary-dark-trans-80); } .overlay--secondary-dark-trans-90 { --overlay-background: var(--secondary-dark-trans-90); } .overlay--secondary-ultra-dark-trans-10 { --overlay-background: var(--secondary-ultra-dark-trans-10); } .overlay--secondary-ultra-dark-trans-20 { --overlay-background: var(--secondary-ultra-dark-trans-20); } .overlay--secondary-ultra-dark-trans-30 { --overlay-background: var(--secondary-ultra-dark-trans-30); } .overlay--secondary-ultra-dark-trans-40 { --overlay-background: var(--secondary-ultra-dark-trans-40); } .overlay--secondary-ultra-dark-trans-50 { --overlay-background: var(--secondary-ultra-dark-trans-50); } .overlay--secondary-ultra-dark-trans-60 { --overlay-background: var(--secondary-ultra-dark-trans-60); } .overlay--secondary-ultra-dark-trans-70 { --overlay-background: var(--secondary-ultra-dark-trans-70); } .overlay--secondary-ultra-dark-trans-80 { --overlay-background: var(--secondary-ultra-dark-trans-80); } .overlay--secondary-ultra-dark-trans-90 { --overlay-background: var(--secondary-ultra-dark-trans-90); } .overlay--tertiary-trans-10 { --overlay-background: var(--tertiary-trans-10); } .overlay--tertiary-trans-20 { --overlay-background: var(--tertiary-trans-20); } .overlay--tertiary-trans-30 { --overlay-background: var(--tertiary-trans-30); } .overlay--tertiary-trans-40 { --overlay-background: var(--tertiary-trans-40); } .overlay--tertiary-trans-50 { --overlay-background: var(--tertiary-trans-50); } .overlay--tertiary-trans-60 { --overlay-background: var(--tertiary-trans-60); } .overlay--tertiary-trans-70 { --overlay-background: var(--tertiary-trans-70); } .overlay--tertiary-trans-80 { --overlay-background: var(--tertiary-trans-80); } .overlay--tertiary-trans-90 { --overlay-background: var(--tertiary-trans-90); } .overlay--tertiary-light-trans-10 { --overlay-background: var(--tertiary-light-trans-10); } .overlay--tertiary-light-trans-20 { --overlay-background: var(--tertiary-light-trans-20); } .overlay--tertiary-light-trans-30 { --overlay-background: var(--tertiary-light-trans-30); } .overlay--tertiary-light-trans-40 { --overlay-background: var(--tertiary-light-trans-40); } .overlay--tertiary-light-trans-50 { --overlay-background: var(--tertiary-light-trans-50); } .overlay--tertiary-light-trans-60 { --overlay-background: var(--tertiary-light-trans-60); } .overlay--tertiary-light-trans-70 { --overlay-background: var(--tertiary-light-trans-70); } .overlay--tertiary-light-trans-80 { --overlay-background: var(--tertiary-light-trans-80); } .overlay--tertiary-light-trans-90 { --overlay-background: var(--tertiary-light-trans-90); } .overlay--tertiary-dark-trans-10 { --overlay-background: var(--tertiary-dark-trans-10); } .overlay--tertiary-dark-trans-20 { --overlay-background: var(--tertiary-dark-trans-20); } .overlay--tertiary-dark-trans-30 { --overlay-background: var(--tertiary-dark-trans-30); } .overlay--tertiary-dark-trans-40 { --overlay-background: var(--tertiary-dark-trans-40); } .overlay--tertiary-dark-trans-50 { --overlay-background: var(--tertiary-dark-trans-50); } .overlay--tertiary-dark-trans-60 { --overlay-background: var(--tertiary-dark-trans-60); } .overlay--tertiary-dark-trans-70 { --overlay-background: var(--tertiary-dark-trans-70); } .overlay--tertiary-dark-trans-80 { --overlay-background: var(--tertiary-dark-trans-80); } .overlay--tertiary-dark-trans-90 { --overlay-background: var(--tertiary-dark-trans-90); } .overlay--tertiary-ultra-dark-trans-10 { --overlay-background: var(--tertiary-ultra-dark-trans-10); } .overlay--tertiary-ultra-dark-trans-20 { --overlay-background: var(--tertiary-ultra-dark-trans-20); } .overlay--tertiary-ultra-dark-trans-30 { --overlay-background: var(--tertiary-ultra-dark-trans-30); } .overlay--tertiary-ultra-dark-trans-40 { --overlay-background: var(--tertiary-ultra-dark-trans-40); } .overlay--tertiary-ultra-dark-trans-50 { --overlay-background: var(--tertiary-ultra-dark-trans-50); } .overlay--tertiary-ultra-dark-trans-60 { --overlay-background: var(--tertiary-ultra-dark-trans-60); } .overlay--tertiary-ultra-dark-trans-70 { --overlay-background: var(--tertiary-ultra-dark-trans-70); } .overlay--tertiary-ultra-dark-trans-80 { --overlay-background: var(--tertiary-ultra-dark-trans-80); } .overlay--tertiary-ultra-dark-trans-90 { --overlay-background: var(--tertiary-ultra-dark-trans-90); } .overlay--accent-trans-10 { --overlay-background: var(--accent-trans-10); } .overlay--accent-trans-20 { --overlay-background: var(--accent-trans-20); } .overlay--accent-trans-30 { --overlay-background: var(--accent-trans-30); } .overlay--accent-trans-40 { --overlay-background: var(--accent-trans-40); } .overlay--accent-trans-50 { --overlay-background: var(--accent-trans-50); } .overlay--accent-trans-60 { --overlay-background: var(--accent-trans-60); } .overlay--accent-trans-70 { --overlay-background: var(--accent-trans-70); } .overlay--accent-trans-80 { --overlay-background: var(--accent-trans-80); } .overlay--accent-trans-90 { --overlay-background: var(--accent-trans-90); } .overlay--accent-light-trans-10 { --overlay-background: var(--accent-light-trans-10); } .overlay--accent-light-trans-20 { --overlay-background: var(--accent-light-trans-20); } .overlay--accent-light-trans-30 { --overlay-background: var(--accent-light-trans-30); } .overlay--accent-light-trans-40 { --overlay-background: var(--accent-light-trans-40); } .overlay--accent-light-trans-50 { --overlay-background: var(--accent-light-trans-50); } .overlay--accent-light-trans-60 { --overlay-background: var(--accent-light-trans-60); } .overlay--accent-light-trans-70 { --overlay-background: var(--accent-light-trans-70); } .overlay--accent-light-trans-80 { --overlay-background: var(--accent-light-trans-80); } .overlay--accent-light-trans-90 { --overlay-background: var(--accent-light-trans-90); } .overlay--accent-dark-trans-10 { --overlay-background: var(--accent-dark-trans-10); } .overlay--accent-dark-trans-20 { --overlay-background: var(--accent-dark-trans-20); } .overlay--accent-dark-trans-30 { --overlay-background: var(--accent-dark-trans-30); } .overlay--accent-dark-trans-40 { --overlay-background: var(--accent-dark-trans-40); } .overlay--accent-dark-trans-50 { --overlay-background: var(--accent-dark-trans-50); } .overlay--accent-dark-trans-60 { --overlay-background: var(--accent-dark-trans-60); } .overlay--accent-dark-trans-70 { --overlay-background: var(--accent-dark-trans-70); } .overlay--accent-dark-trans-80 { --overlay-background: var(--accent-dark-trans-80); } .overlay--accent-dark-trans-90 { --overlay-background: var(--accent-dark-trans-90); } .overlay--accent-ultra-dark-trans-10 { --overlay-background: var(--accent-ultra-dark-trans-10); } .overlay--accent-ultra-dark-trans-20 { --overlay-background: var(--accent-ultra-dark-trans-20); } .overlay--accent-ultra-dark-trans-30 { --overlay-background: var(--accent-ultra-dark-trans-30); } .overlay--accent-ultra-dark-trans-40 { --overlay-background: var(--accent-ultra-dark-trans-40); } .overlay--accent-ultra-dark-trans-50 { --overlay-background: var(--accent-ultra-dark-trans-50); } .overlay--accent-ultra-dark-trans-60 { --overlay-background: var(--accent-ultra-dark-trans-60); } .overlay--accent-ultra-dark-trans-70 { --overlay-background: var(--accent-ultra-dark-trans-70); } .overlay--accent-ultra-dark-trans-80 { --overlay-background: var(--accent-ultra-dark-trans-80); } .overlay--accent-ultra-dark-trans-90 { --overlay-background: var(--accent-ultra-dark-trans-90); } .overlay--base-trans-10 { --overlay-background: var(--base-trans-10); } .overlay--base-trans-20 { --overlay-background: var(--base-trans-20); } .overlay--base-trans-30 { --overlay-background: var(--base-trans-30); } .overlay--base-trans-40 { --overlay-background: var(--base-trans-40); } .overlay--base-trans-50 { --overlay-background: var(--base-trans-50); } .overlay--base-trans-60 { --overlay-background: var(--base-trans-60); } .overlay--base-trans-70 { --overlay-background: var(--base-trans-70); } .overlay--base-trans-80 { --overlay-background: var(--base-trans-80); } .overlay--base-trans-90 { --overlay-background: var(--base-trans-90); } .overlay--base-light-trans-10 { --overlay-background: var(--base-light-trans-10); } .overlay--base-light-trans-20 { --overlay-background: var(--base-light-trans-20); } .overlay--base-light-trans-30 { --overlay-background: var(--base-light-trans-30); } .overlay--base-light-trans-40 { --overlay-background: var(--base-light-trans-40); } .overlay--base-light-trans-50 { --overlay-background: var(--base-light-trans-50); } .overlay--base-light-trans-60 { --overlay-background: var(--base-light-trans-60); } .overlay--base-light-trans-70 { --overlay-background: var(--base-light-trans-70); } .overlay--base-light-trans-80 { --overlay-background: var(--base-light-trans-80); } .overlay--base-light-trans-90 { --overlay-background: var(--base-light-trans-90); } .overlay--base-dark-trans-10 { --overlay-background: var(--base-dark-trans-10); } .overlay--base-dark-trans-20 { --overlay-background: var(--base-dark-trans-20); } .overlay--base-dark-trans-30 { --overlay-background: var(--base-dark-trans-30); } .overlay--base-dark-trans-40 { --overlay-background: var(--base-dark-trans-40); } .overlay--base-dark-trans-50 { --overlay-background: var(--base-dark-trans-50); } .overlay--base-dark-trans-60 { --overlay-background: var(--base-dark-trans-60); } .overlay--base-dark-trans-70 { --overlay-background: var(--base-dark-trans-70); } .overlay--base-dark-trans-80 { --overlay-background: var(--base-dark-trans-80); } .overlay--base-dark-trans-90 { --overlay-background: var(--base-dark-trans-90); } .overlay--base-ultra-dark-trans-10 { --overlay-background: var(--base-ultra-dark-trans-10); } .overlay--base-ultra-dark-trans-20 { --overlay-background: var(--base-ultra-dark-trans-20); } .overlay--base-ultra-dark-trans-30 { --overlay-background: var(--base-ultra-dark-trans-30); } .overlay--base-ultra-dark-trans-40 { --overlay-background: var(--base-ultra-dark-trans-40); } .overlay--base-ultra-dark-trans-50 { --overlay-background: var(--base-ultra-dark-trans-50); } .overlay--base-ultra-dark-trans-60 { --overlay-background: var(--base-ultra-dark-trans-60); } .overlay--base-ultra-dark-trans-70 { --overlay-background: var(--base-ultra-dark-trans-70); } .overlay--base-ultra-dark-trans-80 { --overlay-background: var(--base-ultra-dark-trans-80); } .overlay--base-ultra-dark-trans-90 { --overlay-background: var(--base-ultra-dark-trans-90); } .overlay--neutral-trans-10 { --overlay-background: var(--neutral-trans-10); } .overlay--neutral-trans-20 { --overlay-background: var(--neutral-trans-20); } .overlay--neutral-trans-30 { --overlay-background: var(--neutral-trans-30); } .overlay--neutral-trans-40 { --overlay-background: var(--neutral-trans-40); } .overlay--neutral-trans-50 { --overlay-background: var(--neutral-trans-50); } .overlay--neutral-trans-60 { --overlay-background: var(--neutral-trans-60); } .overlay--neutral-trans-70 { --overlay-background: var(--neutral-trans-70); } .overlay--neutral-trans-80 { --overlay-background: var(--neutral-trans-80); } .overlay--neutral-trans-90 { --overlay-background: var(--neutral-trans-90); } .overlay--neutral-light-trans-10 { --overlay-background: var(--neutral-light-trans-10); } .overlay--neutral-light-trans-20 { --overlay-background: var(--neutral-light-trans-20); } .overlay--neutral-light-trans-30 { --overlay-background: var(--neutral-light-trans-30); } .overlay--neutral-light-trans-40 { --overlay-background: var(--neutral-light-trans-40); } .overlay--neutral-light-trans-50 { --overlay-background: var(--neutral-light-trans-50); } .overlay--neutral-light-trans-60 { --overlay-background: var(--neutral-light-trans-60); } .overlay--neutral-light-trans-70 { --overlay-background: var(--neutral-light-trans-70); } .overlay--neutral-light-trans-80 { --overlay-background: var(--neutral-light-trans-80); } .overlay--neutral-light-trans-90 { --overlay-background: var(--neutral-light-trans-90); } .overlay--neutral-dark-trans-10 { --overlay-background: var(--neutral-dark-trans-10); } .overlay--neutral-dark-trans-20 { --overlay-background: var(--neutral-dark-trans-20); } .overlay--neutral-dark-trans-30 { --overlay-background: var(--neutral-dark-trans-30); } .overlay--neutral-dark-trans-40 { --overlay-background: var(--neutral-dark-trans-40); } .overlay--neutral-dark-trans-50 { --overlay-background: var(--neutral-dark-trans-50); } .overlay--neutral-dark-trans-60 { --overlay-background: var(--neutral-dark-trans-60); } .overlay--neutral-dark-trans-70 { --overlay-background: var(--neutral-dark-trans-70); } .overlay--neutral-dark-trans-80 { --overlay-background: var(--neutral-dark-trans-80); } .overlay--neutral-dark-trans-90 { --overlay-background: var(--neutral-dark-trans-90); } .overlay--neutral-ultra-dark-trans-10 { --overlay-background: var(--neutral-ultra-dark-trans-10); } .overlay--neutral-ultra-dark-trans-20 { --overlay-background: var(--neutral-ultra-dark-trans-20); } .overlay--neutral-ultra-dark-trans-30 { --overlay-background: var(--neutral-ultra-dark-trans-30); } .overlay--neutral-ultra-dark-trans-40 { --overlay-background: var(--neutral-ultra-dark-trans-40); } .overlay--neutral-ultra-dark-trans-50 { --overlay-background: var(--neutral-ultra-dark-trans-50); } .overlay--neutral-ultra-dark-trans-60 { --overlay-background: var(--neutral-ultra-dark-trans-60); } .overlay--neutral-ultra-dark-trans-70 { --overlay-background: var(--neutral-ultra-dark-trans-70); } .overlay--neutral-ultra-dark-trans-80 { --overlay-background: var(--neutral-ultra-dark-trans-80); } .overlay--neutral-ultra-dark-trans-90 { --overlay-background: var(--neutral-ultra-dark-trans-90); } .overlay--white-trans-10 { --overlay-background: var(--white-trans-10); } .overlay--white-trans-20 { --overlay-background: var(--white-trans-20); } .overlay--white-trans-30 { --overlay-background: var(--white-trans-30); } .overlay--white-trans-40 { --overlay-background: var(--white-trans-40); } .overlay--white-trans-50 { --overlay-background: var(--white-trans-50); } .overlay--white-trans-60 { --overlay-background: var(--white-trans-60); } .overlay--white-trans-70 { --overlay-background: var(--white-trans-70); } .overlay--white-trans-80 { --overlay-background: var(--white-trans-80); } .overlay--white-trans-90 { --overlay-background: var(--white-trans-90); } .overlay--black-trans-10 { --overlay-background: var(--black-trans-10); } .overlay--black-trans-20 { --overlay-background: var(--black-trans-20); } .overlay--black-trans-30 { --overlay-background: var(--black-trans-30); } .overlay--black-trans-40 { --overlay-background: var(--black-trans-40); } .overlay--black-trans-50 { --overlay-background: var(--black-trans-50); } .overlay--black-trans-60 { --overlay-background: var(--black-trans-60); } .overlay--black-trans-70 { --overlay-background: var(--black-trans-70); } .overlay--black-trans-80 { --overlay-background: var(--black-trans-80); } .overlay--black-trans-90 { --overlay-background: var(--black-trans-90); } figure[class*="overlay--"]::before { z-index: 0; } .text--primary.text--primary, .text--primary.text--primary :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--primary); } .text--primary-hover.text--primary-hover, .text--primary-hover.text--primary-hover :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--primary-hover); } .text--primary-ultra-light.text--primary-ultra-light, .text--primary-ultra-light.text--primary-ultra-light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--primary-ultra-light); } .text--primary-light.text--primary-light, .text--primary-light.text--primary-light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--primary-light); } .text--primary-semi-light.text--primary-semi-light, .text--primary-semi-light.text--primary-semi-light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--primary-semi-light); } .text--primary-semi-dark.text--primary-semi-dark, .text--primary-semi-dark.text--primary-semi-dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--primary-semi-dark); } .text--primary-dark.text--primary-dark, .text--primary-dark.text--primary-dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--primary-dark); } .text--primary-ultra-dark.text--primary-ultra-dark, .text--primary-ultra-dark.text--primary-ultra-dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--primary-ultra-dark); } .text--secondary.text--secondary, .text--secondary.text--secondary :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--secondary); } .text--secondary-hover.text--secondary-hover, .text--secondary-hover.text--secondary-hover :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--secondary-hover); } .text--secondary-ultra-light.text--secondary-ultra-light, .text--secondary-ultra-light.text--secondary-ultra-light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--secondary-ultra-light); } .text--secondary-light.text--secondary-light, .text--secondary-light.text--secondary-light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--secondary-light); } .text--secondary-semi-light.text--secondary-semi-light, .text--secondary-semi-light.text--secondary-semi-light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--secondary-semi-light); } .text--secondary-semi-dark.text--secondary-semi-dark, .text--secondary-semi-dark.text--secondary-semi-dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--secondary-semi-dark); } .text--secondary-dark.text--secondary-dark, .text--secondary-dark.text--secondary-dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--secondary-dark); } .text--secondary-ultra-dark.text--secondary-ultra-dark, .text--secondary-ultra-dark.text--secondary-ultra-dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--secondary-ultra-dark); } .text--tertiary.text--tertiary, .text--tertiary.text--tertiary :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--tertiary); } .text--tertiary-hover.text--tertiary-hover, .text--tertiary-hover.text--tertiary-hover :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--tertiary-hover); } .text--tertiary-ultra-light.text--tertiary-ultra-light, .text--tertiary-ultra-light.text--tertiary-ultra-light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--tertiary-ultra-light); } .text--tertiary-light.text--tertiary-light, .text--tertiary-light.text--tertiary-light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--tertiary-light); } .text--tertiary-semi-light.text--tertiary-semi-light, .text--tertiary-semi-light.text--tertiary-semi-light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--tertiary-semi-light); } .text--tertiary-semi-dark.text--tertiary-semi-dark, .text--tertiary-semi-dark.text--tertiary-semi-dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--tertiary-semi-dark); } .text--tertiary-dark.text--tertiary-dark, .text--tertiary-dark.text--tertiary-dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--tertiary-dark); } .text--tertiary-ultra-dark.text--tertiary-ultra-dark, .text--tertiary-ultra-dark.text--tertiary-ultra-dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--tertiary-ultra-dark); } .text--accent.text--accent, .text--accent.text--accent :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--accent); } .text--accent-hover.text--accent-hover, .text--accent-hover.text--accent-hover :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--accent-hover); } .text--accent-ultra-light.text--accent-ultra-light, .text--accent-ultra-light.text--accent-ultra-light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--accent-ultra-light); } .text--accent-light.text--accent-light, .text--accent-light.text--accent-light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--accent-light); } .text--accent-semi-light.text--accent-semi-light, .text--accent-semi-light.text--accent-semi-light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--accent-semi-light); } .text--accent-semi-dark.text--accent-semi-dark, .text--accent-semi-dark.text--accent-semi-dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--accent-semi-dark); } .text--accent-dark.text--accent-dark, .text--accent-dark.text--accent-dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--accent-dark); } .text--accent-ultra-dark.text--accent-ultra-dark, .text--accent-ultra-dark.text--accent-ultra-dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--accent-ultra-dark); } .text--base.text--base, .text--base.text--base :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--base); } .text--base-hover.text--base-hover, .text--base-hover.text--base-hover :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--base-hover); } .text--base-ultra-light.text--base-ultra-light, .text--base-ultra-light.text--base-ultra-light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--base-ultra-light); } .text--base-light.text--base-light, .text--base-light.text--base-light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--base-light); } .text--base-semi-light.text--base-semi-light, .text--base-semi-light.text--base-semi-light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--base-semi-light); } .text--base-semi-dark.text--base-semi-dark, .text--base-semi-dark.text--base-semi-dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--base-semi-dark); } .text--base-dark.text--base-dark, .text--base-dark.text--base-dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--base-dark); } .text--base-ultra-dark.text--base-ultra-dark, .text--base-ultra-dark.text--base-ultra-dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--base-ultra-dark); } .text--neutral.text--neutral, .text--neutral.text--neutral :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--neutral); } .text--neutral-hover.text--neutral-hover, .text--neutral-hover.text--neutral-hover :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--neutral-hover); } .text--neutral-ultra-light.text--neutral-ultra-light, .text--neutral-ultra-light.text--neutral-ultra-light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--neutral-ultra-light); } .text--neutral-light.text--neutral-light, .text--neutral-light.text--neutral-light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--neutral-light); } .text--neutral-semi-light.text--neutral-semi-light, .text--neutral-semi-light.text--neutral-semi-light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--neutral-semi-light); } .text--neutral-semi-dark.text--neutral-semi-dark, .text--neutral-semi-dark.text--neutral-semi-dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--neutral-semi-dark); } .text--neutral-dark.text--neutral-dark, .text--neutral-dark.text--neutral-dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--neutral-dark); } .text--neutral-ultra-dark.text--neutral-ultra-dark, .text--neutral-ultra-dark.text--neutral-ultra-dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--neutral-ultra-dark); } .text--white.text--white, .text--white.text--white :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--white); } .text--black.text--black, .text--black.text--black :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--black); } :is(.text--xxl, .text--xl, .text--l, .text--m, .text--s, .text--xs), :is(.text--xxl, .text--xl, .text--l, .text--m, .text--s, .text--xs) > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { line-height: var(--text-line-height); text-wrap: var(--text-text-wrap); } .text--xxl, .text--xxl > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { font-size: var(--text-xxl); } .text--xxl:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { max-width: var(--text-xxl-max-width); } .text--xl, .text--xl > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { font-size: var(--text-xl); } .text--xl:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { max-width: var(--text-xl-max-width); } .text--l, .text--l > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { font-size: var(--text-l); } .text--l:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { max-width: var(--text-l-max-width); } .text--m, .text--m > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { font-size: var(--text-m); line-height: var(--text-m-line-height); } .text--m:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { max-width: var(--text-m-max-width); } .text--s, .text--s > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { font-size: var(--text-s); } .text--s:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { max-width: var(--text-s-max-width); } .text--xs, .text--xs > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { font-size: var(--text-xs); } .text--xs:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { max-width: var(--text-xs-max-width); } .h1.h1, .h--1.h--1 { font-size: var(--h1); max-width: var(--h1-max-width); } .h2.h2, .h--2.h--2 { font-size: var(--h2); max-width: var(--h2-max-width); } .h3.h3, .h--3.h--3 { font-size: var(--h3); max-width: var(--h3-max-width); } .h4.h4, .h--4.h--4 { font-size: var(--h4); line-height: var(--h4-line-height); max-width: var(--h4-max-width); } .h5.h5, .h--5.h--5 { font-size: var(--h5); max-width: var(--h5-max-width); } .h6.h6, .h--6.h--6 { font-size: var(--h6); max-width: var(--h6-max-width); } .text--100 { font-weight: 100; } .text--200 { font-weight: 200; } .text--300 { font-weight: 300; } .text--400 { font-weight: 400; } .text--500 { font-weight: 500; } .text--600 { font-weight: 600; } .text--700 { font-weight: 700; } .text--800 { font-weight: 800; } .text--900 { font-weight: 900; } .text--bold { font-weight: bold; } .text--italic { font-style: italic; } .text--oblique { font-style: oblique; } .text--decoration-none { -webkit-text-decoration: none; text-decoration: none; } .text--underline { -webkit-text-decoration: underline; text-decoration: underline; } .text--underline-wavy { -webkit-text-decoration: underline wavy; text-decoration: underline wavy; } .text--underline-dotted { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } .text--underline-double { -webkit-text-decoration: underline double; text-decoration: underline double; } .text--underline-dashed { -webkit-text-decoration: underline dashed; text-decoration: underline dashed; } .text--overline { -webkit-text-decoration: overline; text-decoration: overline; } .text--line-through { -webkit-text-decoration: line-through; text-decoration: line-through; } .text--transform-none { text-transform: none; } .text--uppercase { text-transform: uppercase; } .text--lowercase { text-transform: lowercase; } .text--capitalize { text-transform: capitalize; } .text--left { text-align: left; } .text--center { text-align: center; } .text--right { text-align: right; } .text--justify { text-align: justify; } blockquote { text-wrap: pretty; } .balance, .text--balance { text-wrap: balance; } .balance p, .balance li, .balance blockquote, .balance h1, .balance h2, .balance h3, .balance h4, .balance h5, .balance h6, .text--balance p, .text--balance li, .text--balance blockquote, .text--balance h1, .text--balance h2, .text--balance h3, .text--balance h4, .text--balance h5, .text--balance h6 { text-wrap: balance; } .text--pretty { text-wrap: pretty; } .text--pretty p, .text--pretty li, .text--pretty blockquote, .text--pretty h1, .text--pretty h2, .text--pretty h3, .text--pretty h4, .text--pretty h5, .text--pretty h6 { text-wrap: pretty; } .unbalance { text-wrap: wrap; } .unbalance p, .unbalance li, .unbalance blockquote, .unbalance h1, .unbalance h2, .unbalance h3, .unbalance h4, .unbalance h5, .unbalance h6 { text-wrap: wrap; } [class*="line-clamp--"] { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--line-count); } .line-clamp--1 { --line-count: 1; } .line-clamp--2 { --line-count: 2; } .line-clamp--3 { --line-count: 3; } .line-clamp--4 { --line-count: 4; } .line-clamp--5 { --line-count: 5; } .opacity--0 { opacity: 0; } .opacity--5 { opacity: 0.05; } .opacity--10 { opacity: 0.1; } .opacity--15 { opacity: 0.15; } .opacity--20 { opacity: 0.2; } .opacity--25 { opacity: 0.25; } .opacity--30 { opacity: 0.3; } .opacity--35 { opacity: 0.35; } .opacity--40 { opacity: 0.4; } .opacity--45 { opacity: 0.45; } .opacity--50 { opacity: 0.5; } .opacity--55 { opacity: 0.55; } .opacity--60 { opacity: 0.6; } .opacity--65 { opacity: 0.65; } .opacity--70 { opacity: 0.7; } .opacity--75 { opacity: 0.75; } .opacity--80 { opacity: 0.8; } .opacity--85 { opacity: 0.85; } .opacity--90 { opacity: 0.9; } .opacity--95 { opacity: 0.95; } .opacity--100 { opacity: 1; } .box-shadow--m { box-shadow: var(--box-shadow-1); } .box-shadow--l { box-shadow: var(--box-shadow-2); } .box-shadow--xl { box-shadow: var(--box-shadow-3); } @media (min-width: 1367px) { .breakout--s { inline-size: 60vw !important; max-inline-size: 60vw !important; margin: 0 calc(-30vw + 50%) !important; } .breakout--m { inline-size: 70vw !important; max-inline-size: 70vw !important; margin: 0 calc(-35vw + 50%) !important; } .breakout--l { inline-size: 80vw !important; max-inline-size: 80vw !important; margin: 0 calc(-40vw + 50%) !important; } .breakout--xl { inline-size: 90vw !important; max-inline-size: 90vw !important; margin: 0 calc(-45vw + 50%) !important; } } .breakout--full { inline-size: 100vw !important; max-inline-size: 100vw !important; margin-inline: calc(-50vw + 50%) !important; align-self: flex-start; } @media (max-width: 1366px) { [class*="breakout--"]:not(.breakout--full) { inline-size: 100% !important; max-inline-size: 100% !important; margin: 0 !important; } } .relative { position: relative; } .sticky.sticky { position: -webkit-sticky; position: sticky; inset-block-start: var(--sticky-offset, var(--offset, 0)); } .sticky-top--s.sticky-top--s { inset-block-start: var(--sticky-top-s, 2.5%); } .sticky-top--m.sticky-top--m { inset-block-start: var(--sticky-top-m, 5%); } .sticky-top--l.sticky-top--l { inset-block-start: var(--sticky-top-l, 10%); } [class*="center--"]:where(:not([class*="self"]))[class*="center--"]:where(:not([class*="self"])) { display: flex; flex-direction: column; align-items: var(--align-items, initial); align-content: var(--align-content, initial); justify-items: var(--justify-items, initial); justify-content: var(--justify-content, initial); text-align: var(--text-align, inherit); } .center--all.center--all { --align-items: center; --align-content: center; --justify-items: center; --justify-content: center; --text-align: center; } .center--y.center--y { --align-items: flex-start; --justify-items: center; --justify-content: center; } .center--x.center--x { --align-items: center; --justify-items: flex-start; --justify-content: flex-start; } .center--left.center--left { --align-items: flex-start; --align-content: flex-start; --justify-items: center; --justify-content: center; --text-align: left; } .center--right.center--right { --align-items: flex-end; --align-content: flex-end; --justify-items: center; --justify-content: center; --text-align: right; } .center--top.center--top { --align-items: center; --align-content: center; --justify-items: flex-start; --justify-content: flex-start; } .center--bottom.center--bottom { --align-items: center; --justify-items: flex-end; --justify-content: flex-end; } @media (max-width: 1366px) { .center--all-xl.center--all-xl { --align-items: center; --align-content: center; --justify-items: center; --justify-content: center; --text-align: center; } .center--y-xl.center--y-xl { --align-items: flex-start; --justify-items: center; --justify-content: center; } .center--x-xl.center--x-xl { --align-items: center; --justify-items: flex-start; --justify-content: flex-start; } .center--left-xl.center--left-xl { --align-items: flex-start; --align-content: flex-start; --justify-items: center; --justify-content: center; --text-align: left; } .center--right-xl.center--right-xl { --align-items: flex-end; --align-content: flex-end; --justify-items: center; --justify-content: center; --text-align: right; } .center--top-xl.center--top-xl { --align-items: center; --align-content: center; --justify-items: flex-start; --justify-content: flex-start; } .center--bottom-xl.center--bottom-xl { --align-items: center; --justify-items: flex-end; --justify-content: flex-end; } } @media (max-width: 992px) { .center--all-l.center--all-l { --align-items: center; --align-content: center; --justify-items: center; --justify-content: center; --text-align: center; } .center--y-l.center--y-l { --align-items: flex-start; --justify-items: center; --justify-content: center; } .center--x-l.center--x-l { --align-items: center; --justify-items: flex-start; --justify-content: flex-start; } .center--left-l.center--left-l { --align-items: flex-start; --align-content: flex-start; --justify-items: center; --justify-content: center; --text-align: left; } .center--right-l.center--right-l { --align-items: flex-end; --align-content: flex-end; --justify-items: center; --justify-content: center; --text-align: right; } .center--top-l.center--top-l { --align-items: center; --align-content: center; --justify-items: flex-start; --justify-content: flex-start; } .center--bottom-l.center--bottom-l { --align-items: center; --justify-items: flex-end; --justify-content: flex-end; } } @media (max-width: 768px) { .center--all-m.center--all-m { --align-items: center; --align-content: center; --justify-items: center; --justify-content: center; --text-align: center; } .center--y-m.center--y-m { --align-items: flex-start; --justify-items: center; --justify-content: center; } .center--x-m.center--x-m { --align-items: center; --justify-items: flex-start; --justify-content: flex-start; } .center--left-m.center--left-m { --align-items: flex-start; --align-content: flex-start; --justify-items: center; --justify-content: center; --text-align: left; } .center--right-m.center--right-m { --align-items: flex-end; --align-content: flex-end; --justify-items: center; --justify-content: center; --text-align: right; } .center--top-m.center--top-m { --align-items: center; --align-content: center; --justify-items: flex-start; --justify-content: flex-start; } .center--bottom-m.center--bottom-m { --align-items: center; --justify-items: flex-end; --justify-content: flex-end; } } @media (max-width: 480px) { .center--all-s.center--all-s { --align-items: center; --align-content: center; --justify-items: center; --justify-content: center; --text-align: center; } .center--y-s.center--y-s { --align-items: flex-start; --justify-items: center; --justify-content: center; } .center--x-s.center--x-s { --align-items: center; --justify-items: flex-start; --justify-content: flex-start; } .center--left-s.center--left-s { --align-items: flex-start; --align-content: flex-start; --justify-items: center; --justify-content: center; --text-align: left; } .center--right-s.center--right-s { --align-items: flex-end; --align-content: flex-end; --justify-items: center; --justify-content: center; --text-align: right; } .center--top-s.center--top-s { --align-items: center; --align-content: center; --justify-items: flex-start; --justify-content: flex-start; } .center--bottom-s.center--bottom-s { --align-items: center; --justify-items: flex-end; --justify-content: flex-end; } } .center--self.center--self { margin-left: auto; margin-right: auto; } .flip--x, .flip--x > div { transform: scaleX(-1); } .flip--y, .flip--y > div { transform: scaleY(-1); } .flip--xy, .flip--xy > div { transform: scale(-1, -1); } .flip--both, .flip--both > div { transform: scale(-1, -1); } img.object-fit--cover, .object-fit--cover img { --object-fit: cover; object-fit: cover; } img.object-fit--contain, .object-fit--contain img { --object-fit: contain; object-fit: contain; } [class*="object-fit--"], [class*="object-fit--"] img { -o-object-position: var(--object-position, 50% 50%); object-position: var(--object-position, 50% 50%); } .object-fit--top-left { --object-position: 10% 10%; } .object-fit--top-center { --object-position: 50% 10%; } .object-fit--top-right { --object-position: 90% 10%; } .object-fit--center-left { --object-position: 10% 50%; } .object-fit--center-right { --object-position: 90% 50%; } .object-fit--bottom-left { --object-position: 10% 90%; } .object-fit--bottom-center { --object-position: 50% 90%; } .object-fit--bottom-right { --object-position: 90% 90%; } .height--20 { min-block-size: 20vh; } .height--30 { min-block-size: 30vh; } .height--40 { min-block-size: 40vh; } .height--50 { min-block-size: 50vh; } .height--60 { min-block-size: 60vh; } .height--70 { min-block-size: 70vh; } .height--80 { min-block-size: 80vh; } .height--90 { min-block-size: 90vh; } .height--100 { min-block-size: 100vh; } .height--full { min-block-size: 100vh; } @media (max-width: 1366px) { .height--xl-20 { min-block-size: 20vh; } .height--xl-30 { min-block-size: 30vh; } .height--xl-40 { min-block-size: 40vh; } .height--xl-50 { min-block-size: 50vh; } .height--xl-60 { min-block-size: 60vh; } .height--xl-70 { min-block-size: 70vh; } .height--xl-80 { min-block-size: 80vh; } .height--xl-90 { min-block-size: 90vh; } .height--xl-100 { min-block-size: 100vh; } .height--xl-full { min-block-size: 100vh; } } @media (max-width: 992px) { .height--l-20 { min-block-size: 20vh; } .height--l-30 { min-block-size: 30vh; } .height--l-40 { min-block-size: 40vh; } .height--l-50 { min-block-size: 50vh; } .height--l-60 { min-block-size: 60vh; } .height--l-70 { min-block-size: 70vh; } .height--l-80 { min-block-size: 80vh; } .height--l-90 { min-block-size: 90vh; } .height--l-100 { min-block-size: 100vh; } .height--l-full { min-block-size: 100vh; } } @media (max-width: 768px) { .height--m-20 { min-block-size: 20vh; } .height--m-30 { min-block-size: 30vh; } .height--m-40 { min-block-size: 40vh; } .height--m-50 { min-block-size: 50vh; } .height--m-60 { min-block-size: 60vh; } .height--m-70 { min-block-size: 70vh; } .height--m-80 { min-block-size: 80vh; } .height--m-90 { min-block-size: 90vh; } .height--m-100 { min-block-size: 100vh; } .height--m-full { min-block-size: 100vh; } } @media (max-width: 480px) { .height--s-20 { min-block-size: 20vh; } .height--s-30 { min-block-size: 30vh; } .height--s-40 { min-block-size: 40vh; } .height--s-50 { min-block-size: 50vh; } .height--s-60 { min-block-size: 60vh; } .height--s-70 { min-block-size: 70vh; } .height--s-80 { min-block-size: 80vh; } .height--s-90 { min-block-size: 90vh; } .height--s-100 { min-block-size: 100vh; } .height--s-full { min-block-size: 100vh; } } .max-height--20 { max-block-size: 20vh; } .max-height--30 { max-block-size: 30vh; } .max-height--40 { max-block-size: 40vh; } .max-height--50 { max-block-size: 50vh; } .max-height--60 { max-block-size: 60vh; } .max-height--70 { max-block-size: 70vh; } .max-height--80 { max-block-size: 80vh; } .max-height--90 { max-block-size: 90vh; } .max-height--100 { max-block-size: 100vh; } .max-height--full { max-block-size: 100vh; } @media (max-width: 1366px) { .max-height--xl-20 { max-block-size: 20vh; } .max-height--xl-30 { max-block-size: 30vh; } .max-height--xl-40 { max-block-size: 40vh; } .max-height--xl-50 { max-block-size: 50vh; } .max-height--xl-60 { max-block-size: 60vh; } .max-height--xl-70 { max-block-size: 70vh; } .max-height--xl-80 { max-block-size: 80vh; } .max-height--xl-90 { max-block-size: 90vh; } .max-height--xl-100 { max-block-size: 100vh; } .max-height--xl-full { max-block-size: 100vh; } } @media (max-width: 992px) { .max-height--l-20 { max-block-size: 20vh; } .max-height--l-30 { max-block-size: 30vh; } .max-height--l-40 { max-block-size: 40vh; } .max-height--l-50 { max-block-size: 50vh; } .max-height--l-60 { max-block-size: 60vh; } .max-height--l-70 { max-block-size: 70vh; } .max-height--l-80 { max-block-size: 80vh; } .max-height--l-90 { max-block-size: 90vh; } .max-height--l-100 { max-block-size: 100vh; } .max-height--l-full { max-block-size: 100vh; } } @media (max-width: 768px) { .max-height--m-20 { max-block-size: 20vh; } .max-height--m-30 { max-block-size: 30vh; } .max-height--m-40 { max-block-size: 40vh; } .max-height--m-50 { max-block-size: 50vh; } .max-height--m-60 { max-block-size: 60vh; } .max-height--m-70 { max-block-size: 70vh; } .max-height--m-80 { max-block-size: 80vh; } .max-height--m-90 { max-block-size: 90vh; } .max-height--m-100 { max-block-size: 100vh; } .max-height--m-full { max-block-size: 100vh; } } @media (max-width: 480px) { .max-height--s-20 { max-block-size: 20vh; } .max-height--s-30 { max-block-size: 30vh; } .max-height--s-40 { max-block-size: 40vh; } .max-height--s-50 { max-block-size: 50vh; } .max-height--s-60 { max-block-size: 60vh; } .max-height--s-70 { max-block-size: 70vh; } .max-height--s-80 { max-block-size: 80vh; } .max-height--s-90 { max-block-size: 90vh; } .max-height--s-100 { max-block-size: 100vh; } .max-height--s-full { max-block-size: 100vh; } } :is([class*="col-count--"], [class*="col-width--"]) { display: block !important; } .col-count--1 { -moz-column-count: 1; column-count: 1; } .col-count--2 { -moz-column-count: 2; column-count: 2; } .col-count--3 { -moz-column-count: 3; column-count: 3; } .col-count--4 { -moz-column-count: 4; column-count: 4; } .col-count--5 { -moz-column-count: 5; column-count: 5; } @media (max-width: 1366px) { .col-count--xl-1 { -moz-column-count: 1; column-count: 1; } .col-count--xl-2 { -moz-column-count: 2; column-count: 2; } .col-count--xl-3 { -moz-column-count: 3; column-count: 3; } .col-count--xl-4 { -moz-column-count: 4; column-count: 4; } .col-count--xl-5 { -moz-column-count: 5; column-count: 5; } } @media (max-width: 992px) { .col-count--l-1 { -moz-column-count: 1; column-count: 1; } .col-count--l-2 { -moz-column-count: 2; column-count: 2; } .col-count--l-3 { -moz-column-count: 3; column-count: 3; } .col-count--l-4 { -moz-column-count: 4; column-count: 4; } .col-count--l-5 { -moz-column-count: 5; column-count: 5; } } @media (max-width: 768px) { .col-count--m-1 { -moz-column-count: 1; column-count: 1; } .col-count--m-2 { -moz-column-count: 2; column-count: 2; } .col-count--m-3 { -moz-column-count: 3; column-count: 3; } .col-count--m-4 { -moz-column-count: 4; column-count: 4; } .col-count--m-5 { -moz-column-count: 5; column-count: 5; } } @media (max-width: 480px) { .col-count--s-1 { -moz-column-count: 1; column-count: 1; } .col-count--s-2 { -moz-column-count: 2; column-count: 2; } .col-count--s-3 { -moz-column-count: 3; column-count: 3; } .col-count--s-4 { -moz-column-count: 4; column-count: 4; } .col-count--s-5 { -moz-column-count: 5; column-count: 5; } } .col-width--s { width: 100%; -moz-column-width: var(--col-width-s, 13rem); column-width: var(--col-width-s, 13rem); } .col-width--m { width: 100%; -moz-column-width: var(--col-width-m, 25rem); column-width: var(--col-width-m, 25rem); } .col-width--l { width: 100%; -moz-column-width: var(--col-width-l, 38rem); column-width: var(--col-width-l, 38rem); } .col-rule--dotted { -moz-column-rule: dotted; column-rule: dotted; -moz-column-rule-width: var(--col-rule-width, var(--col-rule-width-m)); column-rule-width: var(--col-rule-width, var(--col-rule-width-m)); } .col-rule--dashed { -moz-column-rule: dashed; column-rule: dashed; -moz-column-rule-width: var(--col-rule-width, var(--col-rule-width-m)); column-rule-width: var(--col-rule-width, var(--col-rule-width-m)); } .col-rule--solid { -moz-column-rule: solid; column-rule: solid; -moz-column-rule-width: var(--col-rule-width, var(--col-rule-width-m)); column-rule-width: var(--col-rule-width, var(--col-rule-width-m)); } .col-rule--double { -moz-column-rule: double; column-rule: double; -moz-column-rule-width: var(--col-rule-width, var(--col-rule-width-m)); column-rule-width: var(--col-rule-width, var(--col-rule-width-m)); } .col-rule--groove { -moz-column-rule: groove; column-rule: groove; -moz-column-rule-width: var(--col-rule-width, var(--col-rule-width-m)); column-rule-width: var(--col-rule-width, var(--col-rule-width-m)); } .col-rule--ridge { -moz-column-rule: ridge; column-rule: ridge; -moz-column-rule-width: var(--col-rule-width, var(--col-rule-width-m)); column-rule-width: var(--col-rule-width, var(--col-rule-width-m)); } .col-rule--inset { -moz-column-rule: inset; column-rule: inset; -moz-column-rule-width: var(--col-rule-width, var(--col-rule-width-m)); column-rule-width: var(--col-rule-width, var(--col-rule-width-m)); } .col-rule--outset { -moz-column-rule: outset; column-rule: outset; -moz-column-rule-width: var(--col-rule-width, var(--col-rule-width-m)); column-rule-width: var(--col-rule-width, var(--col-rule-width-m)); } .col-rule--primary { -moz-column-rule-color: var(--primary); column-rule-color: var(--primary); } .col-rule--primary-hover { -moz-column-rule-color: var(--primary-hover); column-rule-color: var(--primary-hover); } .col-rule--primary-ultra-light { -moz-column-rule-color: var(--primary-ultra-light); column-rule-color: var(--primary-ultra-light); } .col-rule--primary-light { -moz-column-rule-color: var(--primary-light); column-rule-color: var(--primary-light); } .col-rule--primary-semi-light { -moz-column-rule-color: var(--primary-semi-light); column-rule-color: var(--primary-semi-light); } .col-rule--primary-semi-dark { -moz-column-rule-color: var(--primary-semi-dark); column-rule-color: var(--primary-semi-dark); } .col-rule--primary-dark { -moz-column-rule-color: var(--primary-dark); column-rule-color: var(--primary-dark); } .col-rule--primary-ultra-dark { -moz-column-rule-color: var(--primary-ultra-dark); column-rule-color: var(--primary-ultra-dark); } .col-rule--secondary { -moz-column-rule-color: var(--secondary); column-rule-color: var(--secondary); } .col-rule--secondary-hover { -moz-column-rule-color: var(--secondary-hover); column-rule-color: var(--secondary-hover); } .col-rule--secondary-ultra-light { -moz-column-rule-color: var(--secondary-ultra-light); column-rule-color: var(--secondary-ultra-light); } .col-rule--secondary-light { -moz-column-rule-color: var(--secondary-light); column-rule-color: var(--secondary-light); } .col-rule--secondary-semi-light { -moz-column-rule-color: var(--secondary-semi-light); column-rule-color: var(--secondary-semi-light); } .col-rule--secondary-semi-dark { -moz-column-rule-color: var(--secondary-semi-dark); column-rule-color: var(--secondary-semi-dark); } .col-rule--secondary-dark { -moz-column-rule-color: var(--secondary-dark); column-rule-color: var(--secondary-dark); } .col-rule--secondary-ultra-dark { -moz-column-rule-color: var(--secondary-ultra-dark); column-rule-color: var(--secondary-ultra-dark); } .col-rule--tertiary { -moz-column-rule-color: var(--tertiary); column-rule-color: var(--tertiary); } .col-rule--tertiary-hover { -moz-column-rule-color: var(--tertiary-hover); column-rule-color: var(--tertiary-hover); } .col-rule--tertiary-ultra-light { -moz-column-rule-color: var(--tertiary-ultra-light); column-rule-color: var(--tertiary-ultra-light); } .col-rule--tertiary-light { -moz-column-rule-color: var(--tertiary-light); column-rule-color: var(--tertiary-light); } .col-rule--tertiary-semi-light { -moz-column-rule-color: var(--tertiary-semi-light); column-rule-color: var(--tertiary-semi-light); } .col-rule--tertiary-semi-dark { -moz-column-rule-color: var(--tertiary-semi-dark); column-rule-color: var(--tertiary-semi-dark); } .col-rule--tertiary-dark { -moz-column-rule-color: var(--tertiary-dark); column-rule-color: var(--tertiary-dark); } .col-rule--tertiary-ultra-dark { -moz-column-rule-color: var(--tertiary-ultra-dark); column-rule-color: var(--tertiary-ultra-dark); } .col-rule--accent { -moz-column-rule-color: var(--accent); column-rule-color: var(--accent); } .col-rule--accent-hover { -moz-column-rule-color: var(--accent-hover); column-rule-color: var(--accent-hover); } .col-rule--accent-ultra-light { -moz-column-rule-color: var(--accent-ultra-light); column-rule-color: var(--accent-ultra-light); } .col-rule--accent-light { -moz-column-rule-color: var(--accent-light); column-rule-color: var(--accent-light); } .col-rule--accent-semi-light { -moz-column-rule-color: var(--accent-semi-light); column-rule-color: var(--accent-semi-light); } .col-rule--accent-semi-dark { -moz-column-rule-color: var(--accent-semi-dark); column-rule-color: var(--accent-semi-dark); } .col-rule--accent-dark { -moz-column-rule-color: var(--accent-dark); column-rule-color: var(--accent-dark); } .col-rule--accent-ultra-dark { -moz-column-rule-color: var(--accent-ultra-dark); column-rule-color: var(--accent-ultra-dark); } .col-rule--base { -moz-column-rule-color: var(--base); column-rule-color: var(--base); } .col-rule--base-hover { -moz-column-rule-color: var(--base-hover); column-rule-color: var(--base-hover); } .col-rule--base-ultra-light { -moz-column-rule-color: var(--base-ultra-light); column-rule-color: var(--base-ultra-light); } .col-rule--base-light { -moz-column-rule-color: var(--base-light); column-rule-color: var(--base-light); } .col-rule--base-semi-light { -moz-column-rule-color: var(--base-semi-light); column-rule-color: var(--base-semi-light); } .col-rule--base-semi-dark { -moz-column-rule-color: var(--base-semi-dark); column-rule-color: var(--base-semi-dark); } .col-rule--base-dark { -moz-column-rule-color: var(--base-dark); column-rule-color: var(--base-dark); } .col-rule--base-ultra-dark { -moz-column-rule-color: var(--base-ultra-dark); column-rule-color: var(--base-ultra-dark); } .col-rule--neutral { -moz-column-rule-color: var(--neutral); column-rule-color: var(--neutral); } .col-rule--neutral-hover { -moz-column-rule-color: var(--neutral-hover); column-rule-color: var(--neutral-hover); } .col-rule--neutral-ultra-light { -moz-column-rule-color: var(--neutral-ultra-light); column-rule-color: var(--neutral-ultra-light); } .col-rule--neutral-light { -moz-column-rule-color: var(--neutral-light); column-rule-color: var(--neutral-light); } .col-rule--neutral-semi-light { -moz-column-rule-color: var(--neutral-semi-light); column-rule-color: var(--neutral-semi-light); } .col-rule--neutral-semi-dark { -moz-column-rule-color: var(--neutral-semi-dark); column-rule-color: var(--neutral-semi-dark); } .col-rule--neutral-dark { -moz-column-rule-color: var(--neutral-dark); column-rule-color: var(--neutral-dark); } .col-rule--neutral-ultra-dark { -moz-column-rule-color: var(--neutral-ultra-dark); column-rule-color: var(--neutral-ultra-dark); } .col-rule--white { -moz-column-rule-color: var(--white); column-rule-color: var(--white); } .col-rule--black { -moz-column-rule-color: var(--black); column-rule-color: var(--black); } .col-rule--s { -moz-column-rule-width: var(--col-rule-width-s, 0.5px); column-rule-width: var(--col-rule-width-s, 0.5px); } .col-rule--m { -moz-column-rule-width: var(--col-rule-width-m, 1px); column-rule-width: var(--col-rule-width-m, 1px); } .col-rule--l { -moz-column-rule-width: var(--col-rule-width-l, 3px); column-rule-width: var(--col-rule-width-l, 3px); } .col-span--all { -moz-column-span: all; column-span: all; } [class*="col-"] > * { break-inside: avoid; } .masonry--1 { display: block !important; column-count: 1; row-gap: var(--row-gap); column-gap: var(--col-gap); } .masonry--2 { display: block !important; column-count: 2; row-gap: var(--row-gap); column-gap: var(--col-gap); } .masonry--3 { display: block !important; column-count: 3; row-gap: var(--row-gap); column-gap: var(--col-gap); } .masonry--4 { display: block !important; column-count: 4; row-gap: var(--row-gap); column-gap: var(--col-gap); } .masonry--5 { display: block !important; column-count: 5; row-gap: var(--row-gap); column-gap: var(--col-gap); } @media (max-width: 1366px) { .masonry--xl-1 { column-count: 1; } .masonry--xl-2 { column-count: 2; } .masonry--xl-3 { column-count: 3; } .masonry--xl-4 { column-count: 4; } .masonry--xl-5 { column-count: 5; } } @media (max-width: 992px) { .masonry--l-1 { column-count: 1; } .masonry--l-2 { column-count: 2; } .masonry--l-3 { column-count: 3; } .masonry--l-4 { column-count: 4; } .masonry--l-5 { column-count: 5; } } @media (max-width: 768px) { .masonry--m-1 { column-count: 1; } .masonry--m-2 { column-count: 2; } .masonry--m-3 { column-count: 3; } .masonry--m-4 { column-count: 4; } .masonry--m-5 { column-count: 5; } } @media (max-width: 480px) { .masonry--s-1 { column-count: 1; } .masonry--s-2 { column-count: 2; } .masonry--s-3 { column-count: 3; } .masonry--s-4 { column-count: 4; } .masonry--s-5 { column-count: 5; } } :where([class*="masonry--"] > *) { break-inside: avoid; width: 100%; } :where([class*="masonry--"]) { --col-gap: var(--grid-gap); } :where([class*="masonry--"] > *) { margin-block-end: var(--grid-gap); } [class*="masonry"]:is([class*="gap--"], [class*="row-gap--"], [class*="content-gap"], [class*="container-gap"], [class*="grid-gap"], [class*="fr-content-gap"], [class*="fr-container-gap"], [class*="fr-grid-gap"]) > * { margin-block-end: var(--row-gap); } .variable-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, calc(var(--content-width) / 2 - var(--space-xxl))), 100%), 1fr)); grid-template-rows: var(--grid-1); gap: var(--gap, var(--grid-gap)); } .grid--1 { display: grid !important; grid-template-columns: repeat(1, minmax(0, 1fr)); inline-size: 100%; } .grid--1 > * { grid-column: 1 !important; } .grid--2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; } .grid--3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); inline-size: 100%; } .grid--4 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); inline-size: 100%; } .grid--5 { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); inline-size: 100%; } .grid--6 { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); inline-size: 100%; } .grid--7 { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); inline-size: 100%; } .grid--8 { display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)); inline-size: 100%; } .grid--9 { display: grid !important; grid-template-columns: repeat(9, minmax(0, 1fr)); inline-size: 100%; } .grid--10 { display: grid !important; grid-template-columns: repeat(10, minmax(0, 1fr)); inline-size: 100%; } .grid--11 { display: grid !important; grid-template-columns: repeat(11, minmax(0, 1fr)); inline-size: 100%; } .grid--12 { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); inline-size: 100%; } .grid--1-2 { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); inline-size: 100%; } .grid--1-3 { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); inline-size: 100%; } .grid--2-1 { display: grid !important; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); inline-size: 100%; } .grid--2-3 { display: grid !important; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); inline-size: 100%; } .grid--3-1 { display: grid !important; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); inline-size: 100%; } .grid--3-2 { display: grid !important; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); inline-size: 100%; } .grid-rows--1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .grid-rows--2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .grid-rows--3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .grid-rows--4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .grid-rows--5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .grid-rows--6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .grid-rows--7 { grid-template-rows: repeat(7, minmax(0, 1fr)); } .grid-rows--8 { grid-template-rows: repeat(8, minmax(0, 1fr)); } .grid-rows--9 { grid-template-rows: repeat(9, minmax(0, 1fr)); } .grid-rows--10 { grid-template-rows: repeat(10, minmax(0, 1fr)); } .grid-rows--11 { grid-template-rows: repeat(11, minmax(0, 1fr)); } .grid-rows--12 { grid-template-rows: repeat(12, minmax(0, 1fr)); } @media (max-width: 1366px) { .grid--xl-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid--xl-1 > * { grid-column: 1 !important; } .grid--xl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--xl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--xl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--xl-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid--xl-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid--xl-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .grid--xl-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .grid--xl-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .grid--xl-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .grid--xl-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .grid--xl-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid-rows--xl-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .grid-rows--xl-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .grid-rows--xl-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .grid-rows--xl-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .grid-rows--xl-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .grid-rows--xl-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .grid-rows--xl-7 { grid-template-rows: repeat(7, minmax(0, 1fr)); } .grid-rows--xl-8 { grid-template-rows: repeat(8, minmax(0, 1fr)); } .grid-rows--xl-9 { grid-template-rows: repeat(9, minmax(0, 1fr)); } .grid-rows--xl-10 { grid-template-rows: repeat(10, minmax(0, 1fr)); } .grid-rows--xl-11 { grid-template-rows: repeat(11, minmax(0, 1fr)); } .grid-rows--xl-12 { grid-template-rows: repeat(12, minmax(0, 1fr)); } } @media (max-width: 992px) { .grid--l-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid--l-1 > * { grid-column: 1 !important; } .grid--l-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--l-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--l-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--l-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid--l-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid--l-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .grid--l-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .grid--l-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .grid--l-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .grid--l-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .grid--l-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid-rows--l-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .grid-rows--l-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .grid-rows--l-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .grid-rows--l-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .grid-rows--l-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .grid-rows--l-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .grid-rows--l-7 { grid-template-rows: repeat(7, minmax(0, 1fr)); } .grid-rows--l-8 { grid-template-rows: repeat(8, minmax(0, 1fr)); } .grid-rows--l-9 { grid-template-rows: repeat(9, minmax(0, 1fr)); } .grid-rows--l-10 { grid-template-rows: repeat(10, minmax(0, 1fr)); } .grid-rows--l-11 { grid-template-rows: repeat(11, minmax(0, 1fr)); } .grid-rows--l-12 { grid-template-rows: repeat(12, minmax(0, 1fr)); } } @media (max-width: 768px) { .grid--m-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid--m-1 > * { grid-column: 1 !important; } .grid--m-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--m-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--m-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--m-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid--m-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid--m-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .grid--m-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .grid--m-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .grid--m-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .grid--m-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .grid--m-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid-rows--m-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .grid-rows--m-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .grid-rows--m-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .grid-rows--m-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .grid-rows--m-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .grid-rows--m-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .grid-rows--m-7 { grid-template-rows: repeat(7, minmax(0, 1fr)); } .grid-rows--m-8 { grid-template-rows: repeat(8, minmax(0, 1fr)); } .grid-rows--m-9 { grid-template-rows: repeat(9, minmax(0, 1fr)); } .grid-rows--m-10 { grid-template-rows: repeat(10, minmax(0, 1fr)); } .grid-rows--m-11 { grid-template-rows: repeat(11, minmax(0, 1fr)); } .grid-rows--m-12 { grid-template-rows: repeat(12, minmax(0, 1fr)); } } @media (max-width: 480px) { .grid--s-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid--s-1 > * { grid-column: 1 !important; } .grid--s-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--s-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--s-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--s-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid--s-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid--s-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .grid--s-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .grid--s-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .grid--s-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .grid--s-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .grid--s-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid-rows--s-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .grid-rows--s-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .grid-rows--s-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .grid-rows--s-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .grid-rows--s-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .grid-rows--s-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .grid-rows--s-7 { grid-template-rows: repeat(7, minmax(0, 1fr)); } .grid-rows--s-8 { grid-template-rows: repeat(8, minmax(0, 1fr)); } .grid-rows--s-9 { grid-template-rows: repeat(9, minmax(0, 1fr)); } .grid-rows--s-10 { grid-template-rows: repeat(10, minmax(0, 1fr)); } .grid-rows--s-11 { grid-template-rows: repeat(11, minmax(0, 1fr)); } .grid-rows--s-12 { grid-template-rows: repeat(12, minmax(0, 1fr)); } } @media (min-width: 1367px) { .grid--alternate-xl > .grid--2:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-xl > .grid--1-2:nth-of-type(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .grid--alternate-xl > .grid--1-2:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-xl > .grid--1-3:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } .grid--alternate-xl > .grid--1-3:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-xl > .grid--2-1:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .grid--alternate-xl > .grid--2-1:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-xl > .grid--2-3:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .grid--alternate-xl > .grid--2-3:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-xl > .grid--3-1:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } .grid--alternate-xl > .grid--3-1:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-xl > .grid--3-2:nth-of-type(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .grid--alternate-xl > .grid--3-2:nth-of-type(even) > *:last-child { order: -1; } } @media (min-width: 993px) { .grid--alternate-l > .grid--2:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-l > .grid--1-2:nth-of-type(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .grid--alternate-l > .grid--1-2:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-l > .grid--1-3:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } .grid--alternate-l > .grid--1-3:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-l > .grid--2-1:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .grid--alternate-l > .grid--2-1:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-l > .grid--2-3:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .grid--alternate-l > .grid--2-3:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-l > .grid--3-1:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } .grid--alternate-l > .grid--3-1:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-l > .grid--3-2:nth-of-type(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .grid--alternate-l > .grid--3-2:nth-of-type(even) > *:last-child { order: -1; } } @media (min-width: 769px) { .grid--alternate-m > .grid--2:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-m > .grid--1-2:nth-of-type(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .grid--alternate-m > .grid--1-2:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-m > .grid--1-3:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } .grid--alternate-m > .grid--1-3:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-m > .grid--2-1:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .grid--alternate-m > .grid--2-1:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-m > .grid--2-3:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .grid--alternate-m > .grid--2-3:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-m > .grid--3-1:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } .grid--alternate-m > .grid--3-1:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-m > .grid--3-2:nth-of-type(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .grid--alternate-m > .grid--3-2:nth-of-type(even) > *:last-child { order: -1; } } @media (min-width: 481px) { .grid--alternate-s > .grid--2:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-s > .grid--1-2:nth-of-type(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .grid--alternate-s > .grid--1-2:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-s > .grid--1-3:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } .grid--alternate-s > .grid--1-3:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-s > .grid--2-1:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .grid--alternate-s > .grid--2-1:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-s > .grid--2-3:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .grid--alternate-s > .grid--2-3:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-s > .grid--3-1:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } .grid--alternate-s > .grid--3-1:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-s > .grid--3-2:nth-of-type(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .grid--alternate-s > .grid--3-2:nth-of-type(even) > *:last-child { order: -1; } } .row-span--1 { grid-row-end: span 1; } .col-span--1 { grid-column-end: span 1; } .row-start--1 { grid-row-start: 1; } .row-end--1 { grid-row-end: 1; } .col-start--1 { grid-column-start: 1; } .col-end--1 { grid-column-end: 1; } .row-span--2 { grid-row-end: span 2; } .col-span--2 { grid-column-end: span 2; } .row-start--2 { grid-row-start: 2; } .row-end--2 { grid-row-end: 2; } .col-start--2 { grid-column-start: 2; } .col-end--2 { grid-column-end: 2; } .row-span--3 { grid-row-end: span 3; } .col-span--3 { grid-column-end: span 3; } .row-start--3 { grid-row-start: 3; } .row-end--3 { grid-row-end: 3; } .col-start--3 { grid-column-start: 3; } .col-end--3 { grid-column-end: 3; } .row-span--4 { grid-row-end: span 4; } .col-span--4 { grid-column-end: span 4; } .row-start--4 { grid-row-start: 4; } .row-end--4 { grid-row-end: 4; } .col-start--4 { grid-column-start: 4; } .col-end--4 { grid-column-end: 4; } .row-span--5 { grid-row-end: span 5; } .col-span--5 { grid-column-end: span 5; } .row-start--5 { grid-row-start: 5; } .row-end--5 { grid-row-end: 5; } .col-start--5 { grid-column-start: 5; } .col-end--5 { grid-column-end: 5; } .row-span--6 { grid-row-end: span 6; } .col-span--6 { grid-column-end: span 6; } .row-start--6 { grid-row-start: 6; } .row-end--6 { grid-row-end: 6; } .col-start--6 { grid-column-start: 6; } .col-end--6 { grid-column-end: 6; } .row-span--7 { grid-row-end: span 7; } .col-span--7 { grid-column-end: span 7; } .row-start--7 { grid-row-start: 7; } .row-end--7 { grid-row-end: 7; } .col-start--7 { grid-column-start: 7; } .col-end--7 { grid-column-end: 7; } .row-span--8 { grid-row-end: span 8; } .col-span--8 { grid-column-end: span 8; } .row-start--8 { grid-row-start: 8; } .row-end--8 { grid-row-end: 8; } .col-start--8 { grid-column-start: 8; } .col-end--8 { grid-column-end: 8; } .row-span--9 { grid-row-end: span 9; } .col-span--9 { grid-column-end: span 9; } .row-start--9 { grid-row-start: 9; } .row-end--9 { grid-row-end: 9; } .col-start--9 { grid-column-start: 9; } .col-end--9 { grid-column-end: 9; } .row-span--10 { grid-row-end: span 10; } .col-span--10 { grid-column-end: span 10; } .row-start--10 { grid-row-start: 10; } .row-end--10 { grid-row-end: 10; } .col-start--10 { grid-column-start: 10; } .col-end--10 { grid-column-end: 10; } .row-span--11 { grid-row-end: span 11; } .col-span--11 { grid-column-end: span 11; } .row-start--11 { grid-row-start: 11; } .row-end--11 { grid-row-end: 11; } .col-start--11 { grid-column-start: 11; } .col-end--11 { grid-column-end: 11; } .row-span--12 { grid-row-end: span 12; } .col-span--12 { grid-column-end: span 12; } .row-start--12 { grid-row-start: 12; } .row-end--12 { grid-row-end: 12; } .col-start--12 { grid-column-start: 12; } .col-end--12 { grid-column-end: 12; } @media (max-width: 1366px) { .row-span--xl-1 { grid-row: span 1; } .col-span--xl-1 { grid-column: span 1; } .row-start--xl-1 { grid-row-start: 1; } .row-end--xl-1 { grid-row-end: 1; } .col-start--xl-1 { grid-column-start: 1; } .col-end--xl-1 { grid-column-end: 1; } .row-span--xl-2 { grid-row: span 2; } .col-span--xl-2 { grid-column: span 2; } .row-start--xl-2 { grid-row-start: 2; } .row-end--xl-2 { grid-row-end: 2; } .col-start--xl-2 { grid-column-start: 2; } .col-end--xl-2 { grid-column-end: 2; } .row-span--xl-3 { grid-row: span 3; } .col-span--xl-3 { grid-column: span 3; } .row-start--xl-3 { grid-row-start: 3; } .row-end--xl-3 { grid-row-end: 3; } .col-start--xl-3 { grid-column-start: 3; } .col-end--xl-3 { grid-column-end: 3; } .row-span--xl-4 { grid-row: span 4; } .col-span--xl-4 { grid-column: span 4; } .row-start--xl-4 { grid-row-start: 4; } .row-end--xl-4 { grid-row-end: 4; } .col-start--xl-4 { grid-column-start: 4; } .col-end--xl-4 { grid-column-end: 4; } .row-span--xl-5 { grid-row: span 5; } .col-span--xl-5 { grid-column: span 5; } .row-start--xl-5 { grid-row-start: 5; } .row-end--xl-5 { grid-row-end: 5; } .col-start--xl-5 { grid-column-start: 5; } .col-end--xl-5 { grid-column-end: 5; } .row-span--xl-6 { grid-row: span 6; } .col-span--xl-6 { grid-column: span 6; } .row-start--xl-6 { grid-row-start: 6; } .row-end--xl-6 { grid-row-end: 6; } .col-start--xl-6 { grid-column-start: 6; } .col-end--xl-6 { grid-column-end: 6; } .row-span--xl-7 { grid-row: span 7; } .col-span--xl-7 { grid-column: span 7; } .row-start--xl-7 { grid-row-start: 7; } .row-end--xl-7 { grid-row-end: 7; } .col-start--xl-7 { grid-column-start: 7; } .col-end--xl-7 { grid-column-end: 7; } .row-span--xl-8 { grid-row: span 8; } .col-span--xl-8 { grid-column: span 8; } .row-start--xl-8 { grid-row-start: 8; } .row-end--xl-8 { grid-row-end: 8; } .col-start--xl-8 { grid-column-start: 8; } .col-end--xl-8 { grid-column-end: 8; } .row-span--xl-9 { grid-row: span 9; } .col-span--xl-9 { grid-column: span 9; } .row-start--xl-9 { grid-row-start: 9; } .row-end--xl-9 { grid-row-end: 9; } .col-start--xl-9 { grid-column-start: 9; } .col-end--xl-9 { grid-column-end: 9; } .row-span--xl-10 { grid-row: span 10; } .col-span--xl-10 { grid-column: span 10; } .row-start--xl-10 { grid-row-start: 10; } .row-end--xl-10 { grid-row-end: 10; } .col-start--xl-10 { grid-column-start: 10; } .col-end--xl-10 { grid-column-end: 10; } .row-span--xl-11 { grid-row: span 11; } .col-span--xl-11 { grid-column: span 11; } .row-start--xl-11 { grid-row-start: 11; } .row-end--xl-11 { grid-row-end: 11; } .col-start--xl-11 { grid-column-start: 11; } .col-end--xl-11 { grid-column-end: 11; } .row-span--xl-12 { grid-row: span 12; } .col-span--xl-12 { grid-column: span 12; } .row-start--xl-12 { grid-row-start: 12; } .row-end--xl-12 { grid-row-end: 12; } .col-start--xl-12 { grid-column-start: 12; } .col-end--xl-12 { grid-column-end: 12; } } @media (max-width: 992px) { .row-span--l-1 { grid-row: span 1; } .col-span--l-1 { grid-column: span 1; } .row-start--l-1 { grid-row-start: 1; } .row-end--l-1 { grid-row-end: 1; } .col-start--l-1 { grid-column-start: 1; } .col-end--l-1 { grid-column-end: 1; } .row-span--l-2 { grid-row: span 2; } .col-span--l-2 { grid-column: span 2; } .row-start--l-2 { grid-row-start: 2; } .row-end--l-2 { grid-row-end: 2; } .col-start--l-2 { grid-column-start: 2; } .col-end--l-2 { grid-column-end: 2; } .row-span--l-3 { grid-row: span 3; } .col-span--l-3 { grid-column: span 3; } .row-start--l-3 { grid-row-start: 3; } .row-end--l-3 { grid-row-end: 3; } .col-start--l-3 { grid-column-start: 3; } .col-end--l-3 { grid-column-end: 3; } .row-span--l-4 { grid-row: span 4; } .col-span--l-4 { grid-column: span 4; } .row-start--l-4 { grid-row-start: 4; } .row-end--l-4 { grid-row-end: 4; } .col-start--l-4 { grid-column-start: 4; } .col-end--l-4 { grid-column-end: 4; } .row-span--l-5 { grid-row: span 5; } .col-span--l-5 { grid-column: span 5; } .row-start--l-5 { grid-row-start: 5; } .row-end--l-5 { grid-row-end: 5; } .col-start--l-5 { grid-column-start: 5; } .col-end--l-5 { grid-column-end: 5; } .row-span--l-6 { grid-row: span 6; } .col-span--l-6 { grid-column: span 6; } .row-start--l-6 { grid-row-start: 6; } .row-end--l-6 { grid-row-end: 6; } .col-start--l-6 { grid-column-start: 6; } .col-end--l-6 { grid-column-end: 6; } .row-span--l-7 { grid-row: span 7; } .col-span--l-7 { grid-column: span 7; } .row-start--l-7 { grid-row-start: 7; } .row-end--l-7 { grid-row-end: 7; } .col-start--l-7 { grid-column-start: 7; } .col-end--l-7 { grid-column-end: 7; } .row-span--l-8 { grid-row: span 8; } .col-span--l-8 { grid-column: span 8; } .row-start--l-8 { grid-row-start: 8; } .row-end--l-8 { grid-row-end: 8; } .col-start--l-8 { grid-column-start: 8; } .col-end--l-8 { grid-column-end: 8; } .row-span--l-9 { grid-row: span 9; } .col-span--l-9 { grid-column: span 9; } .row-start--l-9 { grid-row-start: 9; } .row-end--l-9 { grid-row-end: 9; } .col-start--l-9 { grid-column-start: 9; } .col-end--l-9 { grid-column-end: 9; } .row-span--l-10 { grid-row: span 10; } .col-span--l-10 { grid-column: span 10; } .row-start--l-10 { grid-row-start: 10; } .row-end--l-10 { grid-row-end: 10; } .col-start--l-10 { grid-column-start: 10; } .col-end--l-10 { grid-column-end: 10; } .row-span--l-11 { grid-row: span 11; } .col-span--l-11 { grid-column: span 11; } .row-start--l-11 { grid-row-start: 11; } .row-end--l-11 { grid-row-end: 11; } .col-start--l-11 { grid-column-start: 11; } .col-end--l-11 { grid-column-end: 11; } .row-span--l-12 { grid-row: span 12; } .col-span--l-12 { grid-column: span 12; } .row-start--l-12 { grid-row-start: 12; } .row-end--l-12 { grid-row-end: 12; } .col-start--l-12 { grid-column-start: 12; } .col-end--l-12 { grid-column-end: 12; } } @media (max-width: 768px) { .row-span--m-1 { grid-row: span 1; } .col-span--m-1 { grid-column: span 1; } .row-start--m-1 { grid-row-start: 1; } .row-end--m-1 { grid-row-end: 1; } .col-start--m-1 { grid-column-start: 1; } .col-end--m-1 { grid-column-end: 1; } .row-span--m-2 { grid-row: span 2; } .col-span--m-2 { grid-column: span 2; } .row-start--m-2 { grid-row-start: 2; } .row-end--m-2 { grid-row-end: 2; } .col-start--m-2 { grid-column-start: 2; } .col-end--m-2 { grid-column-end: 2; } .row-span--m-3 { grid-row: span 3; } .col-span--m-3 { grid-column: span 3; } .row-start--m-3 { grid-row-start: 3; } .row-end--m-3 { grid-row-end: 3; } .col-start--m-3 { grid-column-start: 3; } .col-end--m-3 { grid-column-end: 3; } .row-span--m-4 { grid-row: span 4; } .col-span--m-4 { grid-column: span 4; } .row-start--m-4 { grid-row-start: 4; } .row-end--m-4 { grid-row-end: 4; } .col-start--m-4 { grid-column-start: 4; } .col-end--m-4 { grid-column-end: 4; } .row-span--m-5 { grid-row: span 5; } .col-span--m-5 { grid-column: span 5; } .row-start--m-5 { grid-row-start: 5; } .row-end--m-5 { grid-row-end: 5; } .col-start--m-5 { grid-column-start: 5; } .col-end--m-5 { grid-column-end: 5; } .row-span--m-6 { grid-row: span 6; } .col-span--m-6 { grid-column: span 6; } .row-start--m-6 { grid-row-start: 6; } .row-end--m-6 { grid-row-end: 6; } .col-start--m-6 { grid-column-start: 6; } .col-end--m-6 { grid-column-end: 6; } .row-span--m-7 { grid-row: span 7; } .col-span--m-7 { grid-column: span 7; } .row-start--m-7 { grid-row-start: 7; } .row-end--m-7 { grid-row-end: 7; } .col-start--m-7 { grid-column-start: 7; } .col-end--m-7 { grid-column-end: 7; } .row-span--m-8 { grid-row: span 8; } .col-span--m-8 { grid-column: span 8; } .row-start--m-8 { grid-row-start: 8; } .row-end--m-8 { grid-row-end: 8; } .col-start--m-8 { grid-column-start: 8; } .col-end--m-8 { grid-column-end: 8; } .row-span--m-9 { grid-row: span 9; } .col-span--m-9 { grid-column: span 9; } .row-start--m-9 { grid-row-start: 9; } .row-end--m-9 { grid-row-end: 9; } .col-start--m-9 { grid-column-start: 9; } .col-end--m-9 { grid-column-end: 9; } .row-span--m-10 { grid-row: span 10; } .col-span--m-10 { grid-column: span 10; } .row-start--m-10 { grid-row-start: 10; } .row-end--m-10 { grid-row-end: 10; } .col-start--m-10 { grid-column-start: 10; } .col-end--m-10 { grid-column-end: 10; } .row-span--m-11 { grid-row: span 11; } .col-span--m-11 { grid-column: span 11; } .row-start--m-11 { grid-row-start: 11; } .row-end--m-11 { grid-row-end: 11; } .col-start--m-11 { grid-column-start: 11; } .col-end--m-11 { grid-column-end: 11; } .row-span--m-12 { grid-row: span 12; } .col-span--m-12 { grid-column: span 12; } .row-start--m-12 { grid-row-start: 12; } .row-end--m-12 { grid-row-end: 12; } .col-start--m-12 { grid-column-start: 12; } .col-end--m-12 { grid-column-end: 12; } } @media (max-width: 480px) { .row-span--s-1 { grid-row: span 1; } .col-span--s-1 { grid-column: span 1; } .row-start--s-1 { grid-row-start: 1; } .row-end--s-1 { grid-row-end: 1; } .col-start--s-1 { grid-column-start: 1; } .col-end--s-1 { grid-column-end: 1; } .row-span--s-2 { grid-row: span 2; } .col-span--s-2 { grid-column: span 2; } .row-start--s-2 { grid-row-start: 2; } .row-end--s-2 { grid-row-end: 2; } .col-start--s-2 { grid-column-start: 2; } .col-end--s-2 { grid-column-end: 2; } .row-span--s-3 { grid-row: span 3; } .col-span--s-3 { grid-column: span 3; } .row-start--s-3 { grid-row-start: 3; } .row-end--s-3 { grid-row-end: 3; } .col-start--s-3 { grid-column-start: 3; } .col-end--s-3 { grid-column-end: 3; } .row-span--s-4 { grid-row: span 4; } .col-span--s-4 { grid-column: span 4; } .row-start--s-4 { grid-row-start: 4; } .row-end--s-4 { grid-row-end: 4; } .col-start--s-4 { grid-column-start: 4; } .col-end--s-4 { grid-column-end: 4; } .row-span--s-5 { grid-row: span 5; } .col-span--s-5 { grid-column: span 5; } .row-start--s-5 { grid-row-start: 5; } .row-end--s-5 { grid-row-end: 5; } .col-start--s-5 { grid-column-start: 5; } .col-end--s-5 { grid-column-end: 5; } .row-span--s-6 { grid-row: span 6; } .col-span--s-6 { grid-column: span 6; } .row-start--s-6 { grid-row-start: 6; } .row-end--s-6 { grid-row-end: 6; } .col-start--s-6 { grid-column-start: 6; } .col-end--s-6 { grid-column-end: 6; } .row-span--s-7 { grid-row: span 7; } .col-span--s-7 { grid-column: span 7; } .row-start--s-7 { grid-row-start: 7; } .row-end--s-7 { grid-row-end: 7; } .col-start--s-7 { grid-column-start: 7; } .col-end--s-7 { grid-column-end: 7; } .row-span--s-8 { grid-row: span 8; } .col-span--s-8 { grid-column: span 8; } .row-start--s-8 { grid-row-start: 8; } .row-end--s-8 { grid-row-end: 8; } .col-start--s-8 { grid-column-start: 8; } .col-end--s-8 { grid-column-end: 8; } .row-span--s-9 { grid-row: span 9; } .col-span--s-9 { grid-column: span 9; } .row-start--s-9 { grid-row-start: 9; } .row-end--s-9 { grid-row-end: 9; } .col-start--s-9 { grid-column-start: 9; } .col-end--s-9 { grid-column-end: 9; } .row-span--s-10 { grid-row: span 10; } .col-span--s-10 { grid-column: span 10; } .row-start--s-10 { grid-row-start: 10; } .row-end--s-10 { grid-row-end: 10; } .col-start--s-10 { grid-column-start: 10; } .col-end--s-10 { grid-column-end: 10; } .row-span--s-11 { grid-row: span 11; } .col-span--s-11 { grid-column: span 11; } .row-start--s-11 { grid-row-start: 11; } .row-end--s-11 { grid-row-end: 11; } .col-start--s-11 { grid-column-start: 11; } .col-end--s-11 { grid-column-end: 11; } .row-span--s-12 { grid-row: span 12; } .col-span--s-12 { grid-column: span 12; } .row-start--s-12 { grid-row-start: 12; } .row-end--s-12 { grid-row-end: 12; } .col-start--s-12 { grid-column-start: 12; } .col-end--s-12 { grid-column-end: 12; } } .col-span--all { grid-column: 1 / -1; } @media (max-width: 1366px) { .col-span--xl-all { grid-column: 1 / -1; } } @media (max-width: 992px) { .col-span--l-all { grid-column: 1 / -1; } } @media (max-width: 768px) { .col-span--m-all { grid-column: 1 / -1; } } @media (max-width: 480px) { .col-span--s-all { grid-column: 1 / -1; } } .order--first { order: -1; } .order--last { order: 999; } .col-end--last { grid-column-end: -1; } @media (max-width: 1366px) { .order--first-xl { order: -1; } .order--last-xl { order: 999; } .col-end--xl-last { grid-column-end: -1; } } @media (max-width: 992px) { .order--first-l { order: -1; } .order--last-l { order: 999; } .col-end--l-last { grid-column-end: -1; } } @media (max-width: 768px) { .order--first-m { order: -1; } .order--last-m { order: 999; } .col-end--m-last { grid-column-end: -1; } } @media (max-width: 480px) { .order--first-s { order: -1; } .order--last-s { order: 999; } .col-end--s-last { grid-column-end: -1; } } .grid--auto-rows.grid--auto-rows { grid-auto-rows: minmax(-webkit-min-content, 1fr); grid-auto-rows: minmax(min-content, 1fr); } [class*="grid--auto"]:where(:not([class*="rows"])) { display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --grid-template-columns-any: var(--grid-template-columns-fit); --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); --grid-template-columns-fit: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-fill: repeat(auto-fill, minmax(var(--min-formula), 1fr)); --grid-template-columns-even-fit: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); --grid-template-columns-even-fill: repeat(auto-fill, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } [class*="grid--auto"]:where(:not([class*="rows"])) > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } :is(.grid--auto-2, .grid--auto-3, .grid--auto-4, .grid--auto-5, .grid--auto-6, .grid--auto-7, .grid--auto-8, .grid--auto-9, .grid--auto-10, .grid--auto-11, .grid--auto-12):where(.grid--auto-rows) { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); } :is(.grid--auto-2, .grid--auto-3, .grid--auto-4, .grid--auto-5, .grid--auto-6, .grid--auto-7, .grid--auto-8, .grid--auto-9, .grid--auto-10, .grid--auto-11, .grid--auto-12):where(.grid--auto-rows) > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-2 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 2; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-3 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 3; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-4 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 4; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-5 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 5; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-6 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 6; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-7 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 7; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-8 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 8; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-9 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 9; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-10 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 10; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-11 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 11; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-12 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 12; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-1-2 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .grid--auto-1-2 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-1-3 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } .grid--auto-1-3 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-2-1 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .grid--auto-2-1 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-2-3 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .grid--auto-2-3 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-3-1 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } .grid--auto-3-1 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-3-2 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .grid--auto-3-2 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } @media (max-width: 992px) { .grid--auto-1-2 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); --column-count: 1; } .grid--auto-1-2 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-1-3 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); --column-count: 1; } .grid--auto-1-3 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-2-1 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); --column-count: 1; } .grid--auto-2-1 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-2-3 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); --column-count: 1; } .grid--auto-2-3 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-3-1 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); --column-count: 1; } .grid--auto-3-1 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-3-2 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.6; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); --column-count: 1; } .grid--auto-3-2 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } } .grid--auto-fill { --grid-template-columns: var(--grid-template-columns-fill); } .grid--auto-fit { --grid-template-columns: var(--grid-template-columns-fit); } @media (min-width: 481px) { .grid--stack-even { --grid-template-columns: var(--grid-template-columns-even); } .grid--stack-even.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-even-fill); } .grid--stack-even.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-even-fit); } } .grid--stack-any { --grid-template-columns: var(--grid-template-columns-any); } .grid--stack-any.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-fill); } .grid--stack-any.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-fit); } @media (max-width: 1366px) { .grid--stack-any-xl { --grid-template-columns: var(--grid-template-columns-any); } .grid--stack-any-xl.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-any-fill); } .grid--stack-any-xl.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-any-fit); } } @media (min-width: 1367px) { .grid--stack-even-xl { --grid-template-columns: var(--grid-template-columns-even); } .grid--stack-even-xl.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-even-fill); } .grid--stack-even-xl.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-even-fit); } } @media (max-width: 992px) { .grid--stack-any-l { --grid-template-columns: var(--grid-template-columns-any); } .grid--stack-any-l.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-any-fill); } .grid--stack-any-l.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-any-fit); } } @media (min-width: 993px) { .grid--stack-even-l { --grid-template-columns: var(--grid-template-columns-even); } .grid--stack-even-l.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-even-fill); } .grid--stack-even-l.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-even-fit); } } @media (max-width: 768px) { .grid--stack-any-m { --grid-template-columns: var(--grid-template-columns-any); } .grid--stack-any-m.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-any-fill); } .grid--stack-any-m.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-any-fit); } } @media (min-width: 769px) { .grid--stack-even-m { --grid-template-columns: var(--grid-template-columns-even); } .grid--stack-even-m.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-even-fill); } .grid--stack-even-m.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-even-fit); } } @media (max-width: 480px) { .grid--stack-any-s { --grid-template-columns: var(--grid-template-columns-any); } .grid--stack-any-s.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-any-fill); } .grid--stack-any-s.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-any-fit); } } @media (min-width: 481px) { .grid--stack-even-s { --grid-template-columns: var(--grid-template-columns-even); } .grid--stack-even-s.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-even-fill); } .grid--stack-even-s.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-even-fit); } } .flex--col.flex--col { display: flex; flex-direction: column; } .flex--row.flex--row { display: flex; flex-direction: row; } .flex--col-reverse.flex--col-reverse { display: flex; flex-direction: column-reverse; } .flex--row-reverse.flex--row-reverse { display: flex; flex-direction: row-reverse; } @media (max-width: 1366px) { .flex--col-xl.flex--col-xl { display: flex; flex-direction: column; } .flex--row-xl.flex--row-xl { display: flex; flex-direction: row; } .flex--col-reverse-xl.flex--col-reverse-xl { display: flex; flex-direction: column-reverse; } .flex--row-reverse-xl.flex--row-reverse-xl { display: flex; flex-direction: row-reverse; } } @media (max-width: 992px) { .flex--col-l.flex--col-l { display: flex; flex-direction: column; } .flex--row-l.flex--row-l { display: flex; flex-direction: row; } .flex--col-reverse-l.flex--col-reverse-l { display: flex; flex-direction: column-reverse; } .flex--row-reverse-l.flex--row-reverse-l { display: flex; flex-direction: row-reverse; } } @media (max-width: 768px) { .flex--col-m.flex--col-m { display: flex; flex-direction: column; } .flex--row-m.flex--row-m { display: flex; flex-direction: row; } .flex--col-reverse-m.flex--col-reverse-m { display: flex; flex-direction: column-reverse; } .flex--row-reverse-m.flex--row-reverse-m { display: flex; flex-direction: row-reverse; } } @media (max-width: 480px) { .flex--col-s.flex--col-s { display: flex; flex-direction: column; } .flex--row-s.flex--row-s { display: flex; flex-direction: row; } .flex--col-reverse-s.flex--col-reverse-s { display: flex; flex-direction: column-reverse; } .flex--row-reverse-s.flex--row-reverse-s { display: flex; flex-direction: row-reverse; } } .justify-content--start.justify-content--start { justify-content: flex-start; } .justify-content--end.justify-content--end { justify-content: flex-end; } .justify-content--center.justify-content--center { justify-content: center; } .justify-content--between.justify-content--between { justify-content: space-between; } .justify-content--around.justify-content--around { justify-content: space-around; } .justify-content--stretch.justify-content--stretch { justify-content: stretch; } .align-content--start.align-content--start { align-content: flex-start; } .align-content--end.align-content--end { align-content: flex-end; } .align-content--center.align-content--center { align-content: center; } .align-content--baseline.align-content--baseline { align-content: baseline; } .align-content--stretch.align-content--stretch { align-content: stretch; } .justify-items--start.justify-items--start { justify-items: flex-start; } .justify-items--center.justify-items--center { justify-items: center; } .justify-items--end.justify-items--end { justify-items: flex-end; } .justify-items--stretch.justify-items--stretch { justify-items: stretch; } .align-items--start.align-items--start { align-items: flex-start; } .align-items--end.align-items--end { align-items: flex-end; } .align-items--center.align-items--center { align-items: center; } .align-items--baseline.align-items--baseline { align-items: baseline; } .align-items--stretch.align-items--stretch { align-items: stretch; } .self--start.self--start { align-self: flex-start; } .self--end.self--end { align-self: flex-end; } .self--stretch.self--stretch { align-self: stretch; } .self--center.self--center { align-self: center; } @media (max-width: 1366px) { .justify-content--start-xl.justify-content--start-xl { justify-content: flex-start; } .justify-content--end-xl.justify-content--end-xl { justify-content: flex-end; } .justify-content--center-xl.justify-content--center-xl { justify-content: center; } .justify-content--between-xl.justify-content--between-xl { justify-content: space-between; } .justify-content--around-xl.justify-content--around-xl { justify-content: space-around; } .justify-content--stretch-xl.justify-content--stretch-xl { justify-content: stretch; } .align-content--start-xl.align-content--start-xl { align-content: flex-start; } .align-content--end-xl.align-content--end-xl { align-content: flex-end; } .align-content--center-xl.align-content--center-xl { align-content: center; } .align-content--baseline-xl.align-content--baseline-xl { align-content: baseline; } .align-content--stretch-xl.align-content--stretch-xl { align-content: stretch; } .justify-items--start-xl.justify-items--start-xl { justify-items: flex-start; } .justify-items--center-xl.justify-items--center-xl { justify-items: center; } .justify-items--end-xl.justify-items--end-xl { justify-items: flex-end; } .justify-items--stretch-xl.justify-items--stretch-xl { justify-items: stretch; } .align-items--start-xl.align-items--start-xl { align-items: flex-start; } .align-items--end-xl.align-items--end-xl { align-items: flex-end; } .align-items--center-xl.align-items--center-xl { align-items: center; } .align-items--baseline-xl.align-items--baseline-xl { align-items: baseline; } .align-items--stretch-xl.align-items--stretch-xl { align-items: stretch; } .self--start-xl.self--start-xl { align-self: flex-start; } .self--end-xl.self--end-xl { align-self: flex-end; } .self--stretch-xl.self--stretch-xl { align-self: stretch; } .self--center-xl.self--center-xl { align-self: center; } } @media (max-width: 992px) { .justify-content--start-l.justify-content--start-l { justify-content: flex-start; } .justify-content--end-l.justify-content--end-l { justify-content: flex-end; } .justify-content--center-l.justify-content--center-l { justify-content: center; } .justify-content--between-l.justify-content--between-l { justify-content: space-between; } .justify-content--around-l.justify-content--around-l { justify-content: space-around; } .justify-content--stretch-l.justify-content--stretch-l { justify-content: stretch; } .align-content--start-l.align-content--start-l { align-content: flex-start; } .align-content--end-l.align-content--end-l { align-content: flex-end; } .align-content--center-l.align-content--center-l { align-content: center; } .align-content--baseline-l.align-content--baseline-l { align-content: baseline; } .align-content--stretch-l.align-content--stretch-l { align-content: stretch; } .justify-items--start-l.justify-items--start-l { justify-items: flex-start; } .justify-items--center-l.justify-items--center-l { justify-items: center; } .justify-items--end-l.justify-items--end-l { justify-items: flex-end; } .justify-items--stretch-l.justify-items--stretch-l { justify-items: stretch; } .align-items--start-l.align-items--start-l { align-items: flex-start; } .align-items--end-l.align-items--end-l { align-items: flex-end; } .align-items--center-l.align-items--center-l { align-items: center; } .align-items--baseline-l.align-items--baseline-l { align-items: baseline; } .align-items--stretch-l.align-items--stretch-l { align-items: stretch; } .self--start-l.self--start-l { align-self: flex-start; } .self--end-l.self--end-l { align-self: flex-end; } .self--stretch-l.self--stretch-l { align-self: stretch; } .self--center-l.self--center-l { align-self: center; } } @media (max-width: 768px) { .justify-content--start-m.justify-content--start-m { justify-content: flex-start; } .justify-content--end-m.justify-content--end-m { justify-content: flex-end; } .justify-content--center-m.justify-content--center-m { justify-content: center; } .justify-content--between-m.justify-content--between-m { justify-content: space-between; } .justify-content--around-m.justify-content--around-m { justify-content: space-around; } .justify-content--stretch-m.justify-content--stretch-m { justify-content: stretch; } .align-content--start-m.align-content--start-m { align-content: flex-start; } .align-content--end-m.align-content--end-m { align-content: flex-end; } .align-content--center-m.align-content--center-m { align-content: center; } .align-content--baseline-m.align-content--baseline-m { align-content: baseline; } .align-content--stretch-m.align-content--stretch-m { align-content: stretch; } .justify-items--start-m.justify-items--start-m { justify-items: flex-start; } .justify-items--center-m.justify-items--center-m { justify-items: center; } .justify-items--end-m.justify-items--end-m { justify-items: flex-end; } .justify-items--stretch-m.justify-items--stretch-m { justify-items: stretch; } .align-items--start-m.align-items--start-m { align-items: flex-start; } .align-items--end-m.align-items--end-m { align-items: flex-end; } .align-items--center-m.align-items--center-m { align-items: center; } .align-items--baseline-m.align-items--baseline-m { align-items: baseline; } .align-items--stretch-m.align-items--stretch-m { align-items: stretch; } .self--start-m.self--start-m { align-self: flex-start; } .self--end-m.self--end-m { align-self: flex-end; } .self--stretch-m.self--stretch-m { align-self: stretch; } .self--center-m.self--center-m { align-self: center; } } @media (max-width: 480px) { .justify-content--start-s.justify-content--start-s { justify-content: flex-start; } .justify-content--end-s.justify-content--end-s { justify-content: flex-end; } .justify-content--center-s.justify-content--center-s { justify-content: center; } .justify-content--between-s.justify-content--between-s { justify-content: space-between; } .justify-content--around-s.justify-content--around-s { justify-content: space-around; } .justify-content--stretch-s.justify-content--stretch-s { justify-content: stretch; } .align-content--start-s.align-content--start-s { align-content: flex-start; } .align-content--end-s.align-content--end-s { align-content: flex-end; } .align-content--center-s.align-content--center-s { align-content: center; } .align-content--baseline-s.align-content--baseline-s { align-content: baseline; } .align-content--stretch-s.align-content--stretch-s { align-content: stretch; } .justify-items--start-s.justify-items--start-s { justify-items: flex-start; } .justify-items--center-s.justify-items--center-s { justify-items: center; } .justify-items--end-s.justify-items--end-s { justify-items: flex-end; } .justify-items--stretch-s.justify-items--stretch-s { justify-items: stretch; } .align-items--start-s.align-items--start-s { align-items: flex-start; } .align-items--end-s.align-items--end-s { align-items: flex-end; } .align-items--center-s.align-items--center-s { align-items: center; } .align-items--baseline-s.align-items--baseline-s { align-items: baseline; } .align-items--stretch-s.align-items--stretch-s { align-items: stretch; } .self--start-s.self--start-s { align-self: flex-start; } .self--end-s.self--end-s { align-self: flex-end; } .self--stretch-s.self--stretch-s { align-self: stretch; } .self--center-s.self--center-s { align-self: center; } } .stretch.stretch { align-content: stretch; align-items: stretch; justify-content: stretch; justify-items: stretch; } .flex--wrap.flex--wrap { flex-wrap: wrap; } .flex--grow > * { flex-grow: 1; } .width--xs:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.1); max-inline-size: 100%; } .width--s:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.2); max-inline-size: 100%; } .width--m:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.4); max-inline-size: 100%; } .width--l:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.6); max-inline-size: 100%; } .width--xl:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.8); max-inline-size: 100%; } .width--xxl:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.9); max-inline-size: 100%; } .width--vp-max:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 1); max-inline-size: 100%; } .width--content:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 1); max-inline-size: 100%; } .width--10:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.1); max-inline-size: 100%; } .width--20:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.2); max-inline-size: 100%; } .width--30:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.3); max-inline-size: 100%; } .width--40:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.4); max-inline-size: 100%; } .width--50:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.5); max-inline-size: 100%; } .width--60:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.6); max-inline-size: 100%; } .width--70:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.7); max-inline-size: 100%; } .width--80:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.8); max-inline-size: 100%; } .width--90:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.9); max-inline-size: 100%; } .width--full:not([class*="breakout--"]) { inline-size: 100%; max-inline-size: 100%; } figure[class*="width--"] img { inline-size: 100%; } .width--auto.width--auto { inline-size: auto !important; max-inline-size: 100%; } .content-width.content-width { inline-size: 100%; max-inline-size: var(--content-width); margin-inline: auto; } .content-width--safe.content-width--safe { inline-size: 100%; max-inline-size: var(--content-width-safe); margin-inline: auto; } [class*="aspect--"] { aspect-ratio: var(--aspect-ratio); } img[class*="aspect--"] { -o-object-fit: var(--object-fit, cover); object-fit: var(--object-fit, cover); } figure[class*="aspect--"] img { inline-size: 100%; block-size: 100%; } [class*="aspect--"] iframe { width: 100%; height: 100%; aspect-ratio: var(--aspect-ratio); } .aspect--1-1 { --aspect-ratio: 1 / 1; } .aspect--1-2 { --aspect-ratio: 1 / 2; } .aspect--2-1 { --aspect-ratio: 2 / 1; } .aspect--2-3 { --aspect-ratio: 2 / 3; } .aspect--3-2 { --aspect-ratio: 3 / 2; } .aspect--3-4 { --aspect-ratio: 3 / 4; } .aspect--4-3 { --aspect-ratio: 4 / 3; } .aspect--16-9 { --aspect-ratio: 16 / 9; } .aspect--9-16 { --aspect-ratio: 9 / 16; } @media (max-width: 1366px) { .aspect--xl-1-1 { --aspect-ratio: 1 / 1; } .aspect--xl-1-2 { --aspect-ratio: 1 / 2; } .aspect--xl-2-1 { --aspect-ratio: 2 / 1; } .aspect--xl-2-3 { --aspect-ratio: 2 / 3; } .aspect--xl-3-2 { --aspect-ratio: 3 / 2; } .aspect--xl-3-4 { --aspect-ratio: 3 / 4; } .aspect--xl-4-3 { --aspect-ratio: 4 / 3; } .aspect--xl-16-9 { --aspect-ratio: 16 / 9; } .aspect--xl-9-16 { --aspect-ratio: 9 / 16; } } @media (max-width: 992px) { .aspect--l-1-1 { --aspect-ratio: 1 / 1; } .aspect--l-1-2 { --aspect-ratio: 1 / 2; } .aspect--l-2-1 { --aspect-ratio: 2 / 1; } .aspect--l-2-3 { --aspect-ratio: 2 / 3; } .aspect--l-3-2 { --aspect-ratio: 3 / 2; } .aspect--l-3-4 { --aspect-ratio: 3 / 4; } .aspect--l-4-3 { --aspect-ratio: 4 / 3; } .aspect--l-16-9 { --aspect-ratio: 16 / 9; } .aspect--l-9-16 { --aspect-ratio: 9 / 16; } } @media (max-width: 768px) { .aspect--m-1-1 { --aspect-ratio: 1 / 1; } .aspect--m-1-2 { --aspect-ratio: 1 / 2; } .aspect--m-2-1 { --aspect-ratio: 2 / 1; } .aspect--m-2-3 { --aspect-ratio: 2 / 3; } .aspect--m-3-2 { --aspect-ratio: 3 / 2; } .aspect--m-3-4 { --aspect-ratio: 3 / 4; } .aspect--m-4-3 { --aspect-ratio: 4 / 3; } .aspect--m-16-9 { --aspect-ratio: 16 / 9; } .aspect--m-9-16 { --aspect-ratio: 9 / 16; } } @media (max-width: 480px) { .aspect--s-1-1 { --aspect-ratio: 1 / 1; } .aspect--s-1-2 { --aspect-ratio: 1 / 2; } .aspect--s-2-1 { --aspect-ratio: 2 / 1; } .aspect--s-2-3 { --aspect-ratio: 2 / 3; } .aspect--s-3-2 { --aspect-ratio: 3 / 2; } .aspect--s-3-4 { --aspect-ratio: 3 / 4; } .aspect--s-4-3 { --aspect-ratio: 4 / 3; } .aspect--s-16-9 { --aspect-ratio: 16 / 9; } .aspect--s-9-16 { --aspect-ratio: 9 / 16; } } @supports not (aspect-ratio: 1.7777777778) { [class*="aspect--"]::before { float: left; padding-top: var(--aspect-fallback-value); content: ""; } [class*="aspect--"]::after { display: block; content: ""; clear: both; } .aspect--1-1 { --aspect-fallback-value: 100%; } .aspect--1-2 { --aspect-fallback-value: 50%; } .aspect--2-1 { --aspect-fallback-value: 200%; } .aspect--2-3 { --aspect-fallback-value: 150%; } .aspect--3-2 { --aspect-fallback-value: 66%; } .aspect--3-4 { --aspect-fallback-value: 133%; } .aspect--4-3 { --aspect-fallback-value: 75%; } .aspect--16-9 { --aspect-fallback-value: 56.25%; } .aspect--9-16 { --aspect-fallback-value: 177%; } @media (max-width: 1366px) { .aspect--xl-1-1 { --aspect-fallback-value: 100%; } .aspect--xl-1-2 { --aspect-fallback-value: 50%; } .aspect--xl-2-1 { --aspect-fallback-value: 200%; } .aspect--xl-2-3 { --aspect-fallback-value: 150%; } .aspect--xl-3-2 { --aspect-fallback-value: 66%; } .aspect--xl-3-4 { --aspect-fallback-value: 133%; } .aspect--xl-4-3 { --aspect-fallback-value: 75%; } .aspect--xl-16-9 { --aspect-fallback-value: 56.25%; } .aspect--xl-9-16 { --aspect-fallback-value: 177%; } } @media (max-width: 992px) { .aspect--l-1-1 { --aspect-fallback-value: 100%; } .aspect--l-1-2 { --aspect-fallback-value: 50%; } .aspect--l-2-1 { --aspect-fallback-value: 200%; } .aspect--l-2-3 { --aspect-fallback-value: 150%; } .aspect--l-3-2 { --aspect-fallback-value: 66%; } .aspect--l-3-4 { --aspect-fallback-value: 133%; } .aspect--l-4-3 { --aspect-fallback-value: 75%; } .aspect--l-16-9 { --aspect-fallback-value: 56.25%; } .aspect--l-9-16 { --aspect-fallback-value: 177%; } } @media (max-width: 768px) { .aspect--m-1-1 { --aspect-fallback-value: 100%; } .aspect--m-1-2 { --aspect-fallback-value: 50%; } .aspect--m-2-1 { --aspect-fallback-value: 200%; } .aspect--m-2-3 { --aspect-fallback-value: 150%; } .aspect--m-3-2 { --aspect-fallback-value: 66%; } .aspect--m-3-4 { --aspect-fallback-value: 133%; } .aspect--m-4-3 { --aspect-fallback-value: 75%; } .aspect--m-16-9 { --aspect-fallback-value: 56.25%; } .aspect--m-9-16 { --aspect-fallback-value: 177%; } } @media (max-width: 480px) { .aspect--s-1-1 { --aspect-fallback-value: 100%; } .aspect--s-1-2 { --aspect-fallback-value: 50%; } .aspect--s-2-1 { --aspect-fallback-value: 200%; } .aspect--s-2-3 { --aspect-fallback-value: 150%; } .aspect--s-3-2 { --aspect-fallback-value: 66%; } .aspect--s-3-4 { --aspect-fallback-value: 133%; } .aspect--s-4-3 { --aspect-fallback-value: 75%; } .aspect--s-16-9 { --aspect-fallback-value: 56.25%; } .aspect--s-9-16 { --aspect-fallback-value: 177%; } } } .z--bottom { z-index: -1; } .z--0 { z-index: 0; } .z--10 { z-index: 10; } .z--20 { z-index: 20; } .z--30 { z-index: 30; } .z--40 { z-index: 40; } .z--50 { z-index: 50; } .z--60 { z-index: 60; } .z--70 { z-index: 70; } .z--80 { z-index: 80; } .z--90 { z-index: 90; } .z--top { z-index: 9999; } @media (max-width: 1366px) { .z--xl-bottom { z-index: -1; } .z--xl-0 { z-index: 0; } .z--xl-10 { z-index: 10; } .z--xl-20 { z-index: 20; } .z--xl-30 { z-index: 30; } .z--xl-40 { z-index: 40; } .z--xl-50 { z-index: 50; } .z--xl-60 { z-index: 60; } .z--xl-70 { z-index: 70; } .z--xl-80 { z-index: 80; } .z--xl-90 { z-index: 90; } .z--xl-top { z-index: 9999; } } @media (max-width: 992px) { .z--l-bottom { z-index: -1; } .z--l-0 { z-index: 0; } .z--l-10 { z-index: 10; } .z--l-20 { z-index: 20; } .z--l-30 { z-index: 30; } .z--l-40 { z-index: 40; } .z--l-50 { z-index: 50; } .z--l-60 { z-index: 60; } .z--l-70 { z-index: 70; } .z--l-80 { z-index: 80; } .z--l-90 { z-index: 90; } .z--l-top { z-index: 9999; } } @media (max-width: 768px) { .z--m-bottom { z-index: -1; } .z--m-0 { z-index: 0; } .z--m-10 { z-index: 10; } .z--m-20 { z-index: 20; } .z--m-30 { z-index: 30; } .z--m-40 { z-index: 40; } .z--m-50 { z-index: 50; } .z--m-60 { z-index: 60; } .z--m-70 { z-index: 70; } .z--m-80 { z-index: 80; } .z--m-90 { z-index: 90; } .z--m-top { z-index: 9999; } } @media (max-width: 480px) { .z--s-bottom { z-index: -1; } .z--s-0 { z-index: 0; } .z--s-10 { z-index: 10; } .z--s-20 { z-index: 20; } .z--s-30 { z-index: 30; } .z--s-40 { z-index: 40; } .z--s-50 { z-index: 50; } .z--s-60 { z-index: 60; } .z--s-70 { z-index: 70; } .z--s-80 { z-index: 80; } .z--s-90 { z-index: 90; } .z--s-top { z-index: 9999; } } .isolation--isolate { isolation: isolate; } .marker--primary li::marker { color: var(--primary); } .marker--primary-hover li::marker { color: var(--primary-hover); } .marker--primary-ultra-light li::marker { color: var(--primary-ultra-light); } .marker--primary-light li::marker { color: var(--primary-light); } .marker--primary-semi-light li::marker { color: var(--primary-semi-light); } .marker--primary-semi-dark li::marker { color: var(--primary-semi-dark); } .marker--primary-dark li::marker { color: var(--primary-dark); } .marker--primary-ultra-dark li::marker { color: var(--primary-ultra-dark); } .marker--secondary li::marker { color: var(--secondary); } .marker--secondary-hover li::marker { color: var(--secondary-hover); } .marker--secondary-ultra-light li::marker { color: var(--secondary-ultra-light); } .marker--secondary-light li::marker { color: var(--secondary-light); } .marker--secondary-semi-light li::marker { color: var(--secondary-semi-light); } .marker--secondary-semi-dark li::marker { color: var(--secondary-semi-dark); } .marker--secondary-dark li::marker { color: var(--secondary-dark); } .marker--secondary-ultra-dark li::marker { color: var(--secondary-ultra-dark); } .marker--tertiary li::marker { color: var(--tertiary); } .marker--tertiary-hover li::marker { color: var(--tertiary-hover); } .marker--tertiary-ultra-light li::marker { color: var(--tertiary-ultra-light); } .marker--tertiary-light li::marker { color: var(--tertiary-light); } .marker--tertiary-semi-light li::marker { color: var(--tertiary-semi-light); } .marker--tertiary-semi-dark li::marker { color: var(--tertiary-semi-dark); } .marker--tertiary-dark li::marker { color: var(--tertiary-dark); } .marker--tertiary-ultra-dark li::marker { color: var(--tertiary-ultra-dark); } .marker--accent li::marker { color: var(--accent); } .marker--accent-hover li::marker { color: var(--accent-hover); } .marker--accent-ultra-light li::marker { color: var(--accent-ultra-light); } .marker--accent-light li::marker { color: var(--accent-light); } .marker--accent-semi-light li::marker { color: var(--accent-semi-light); } .marker--accent-semi-dark li::marker { color: var(--accent-semi-dark); } .marker--accent-dark li::marker { color: var(--accent-dark); } .marker--accent-ultra-dark li::marker { color: var(--accent-ultra-dark); } .marker--base li::marker { color: var(--base); } .marker--base-hover li::marker { color: var(--base-hover); } .marker--base-ultra-light li::marker { color: var(--base-ultra-light); } .marker--base-light li::marker { color: var(--base-light); } .marker--base-semi-light li::marker { color: var(--base-semi-light); } .marker--base-semi-dark li::marker { color: var(--base-semi-dark); } .marker--base-dark li::marker { color: var(--base-dark); } .marker--base-ultra-dark li::marker { color: var(--base-ultra-dark); } .marker--neutral li::marker { color: var(--neutral); } .marker--neutral-hover li::marker { color: var(--neutral-hover); } .marker--neutral-ultra-light li::marker { color: var(--neutral-ultra-light); } .marker--neutral-light li::marker { color: var(--neutral-light); } .marker--neutral-semi-light li::marker { color: var(--neutral-semi-light); } .marker--neutral-semi-dark li::marker { color: var(--neutral-semi-dark); } .marker--neutral-dark li::marker { color: var(--neutral-dark); } .marker--neutral-ultra-dark li::marker { color: var(--neutral-ultra-dark); } .marker--white li::marker { color: var(--white); } .marker--black li::marker { color: var(--black); } /* TODO: @kevingeary this probably should go somewhere else */ ul.list--none, ol.list--none, .list--none > ul, .list--none > ol { list-style: none; padding-inline-start: 0; list-style-type: none; -webkit-margin-before: 0em; margin-block-start: 0em; margin-block-end: 0; } :has(> .ribbon) { position: relative; overflow: hidden; } .ribbon { --ribbon-width: 30rem; --ribbon-offset: -2rem; --ribbon-padding: .5em 1em; --ribbon-background-color: var(--action); --ribbon-text-color: var(--white); --ribbon-text-size: var(--text-s); --ribbon-shadow: 0 5px 10px var(--neutral-trans-10); --ribbon-transform: translateY(-100%) rotate(90deg) translateX(70.71067811865476%) rotate(-45deg); --ribbon-transform-origin: bottom right; position: absolute; display: block; padding: var(--ribbon-padding); background-color: var(--ribbon-background-color); box-shadow: var(--ribbon-shadow); text-align: center; font-size: var(--ribbon-text-size); color: var(--ribbon-text-color); inline-size: var(--ribbon-width); } .ribbon--top-right, .ribbon[data-ribbon-position="top-right"] { inset-block-start: var(--ribbon-offset); inset-inline-end: var(--ribbon-offset); transform: var(--ribbon-transform); transform-origin: var(--ribbon-transform-origin); } .ribbon--top-left, .ribbon[data-ribbon-position="top-left"] { --ribbon-transform: translateY(-100%) rotate(90deg) translateX(70.71067811865476%) rotate(-135deg); --ribbon-transform-origin: bottom left; inset-block-start: var(--ribbon-offset); inset-inline-start: var(--ribbon-offset); transform: var(--ribbon-transform); transform-origin: var(--ribbon-transform-origin); } span.ribbon { inline-size: var(--ribbon-width) !important; } .visibility--hidden.visibility--hidden { visibility: var(--visibility, hidden); } .visibility--visible.visibility--visible { visibility: var(--visibility, visible); } @media (max-width: 1366px) { .visibility--hidden-xl.visibility--hidden-xl { visibility: var(--visibility, hidden); } .visibility--visible-xl.visibility--visible-xl { visibility: var(--visibility, visible); } } @media (max-width: 992px) { .visibility--hidden-l.visibility--hidden-l { visibility: var(--visibility, hidden); } .visibility--visible-l.visibility--visible-l { visibility: var(--visibility, visible); } } @media (max-width: 768px) { .visibility--hidden-m.visibility--hidden-m { visibility: var(--visibility, hidden); } .visibility--visible-m.visibility--visible-m { visibility: var(--visibility, visible); } } @media (max-width: 480px) { .visibility--hidden-s.visibility--hidden-s { visibility: var(--visibility, hidden); } .visibility--visible-s.visibility--visible-s { visibility: var(--visibility, visible); } } .display--inline.display--inline { display: inline; } .display--block.display--block { display: block; } .display--contents.display--contents { display: contents; } .display--inline-block.display--inline-block { display: inline-block; } .display--inline-flex.display--inline-flex { display: inline-flex; } .display--list-item.display--list-item { display: list-item; } .display--none.display--none { display: none; } @media (max-width: 1366px) { .display--xl-block.display--xl-block { display: block; } .display--xl-none.display--xl-none { display: none; } } @media (max-width: 992px) { .display--l-block.display--l-block { display: block; } .display--l-none.display--l-none { display: none; } } @media (max-width: 768px) { .display--m-block.display--m-block { display: block; } .display--m-none.display--m-none { display: none; } } @media (max-width: 480px) { .display--s-block.display--s-block { display: block; } .display--s-none.display--s-none { display: none; } } @supports (font-size: calc(1vw + 2vw)) { :root { --text-xs: calc(0.75rem + (-0.1168709751 * ((100vw - 22.5rem) / 62.875))); --text-s: calc(0.8125rem + (0.0314609902 * ((100vw - 22.5rem) / 62.875))); --text-m: calc(1rem + (0.125 * ((100vw - 22.5rem) / 62.875))); --text-l: calc(1.2rem + (0.299625 * ((100vw - 22.5rem) / 62.875))); --text-xl: calc(1.44rem + (0.559000125 * ((100vw - 22.5rem) / 62.875))); --text-xxl: calc(1.728rem + (0.9366671666 * ((100vw - 22.5rem) / 62.875))); --h6: calc(0.75rem + (0.0238243638 * ((100vw - 22.5rem) / 62.875))); --h5: calc(0.8125rem + (0.219007877 * ((100vw - 22.5rem) / 62.875))); --h4: calc(1.25rem + (0.125 * ((100vw - 22.5rem) / 62.875))); --h3: calc(1.5rem + (0.332875 * ((100vw - 22.5rem) / 62.875))); --h2: calc(1.8rem + (0.643222375 * ((100vw - 22.5rem) / 62.875))); --h1: calc(2.16rem + (1.0968154259 * ((100vw - 22.5rem) / 62.875))); } @media (min-width: 1367px) { :root { --text-xs: 0.6331290249rem; --text-s: 0.8439609902rem; --text-m: 1.125rem; --text-l: 1.499625rem; --text-xl: 1.999000125rem; --text-xxl: 2.6646671666rem; --h6: 0.7738243638rem; --h5: 1.031507877rem; --h4: 1.375rem; --h3: 1.832875rem; --h2: 2.443222375rem; --h1: 3.2568154259rem; } } } @supports (font-size: clamp(1vw, 2vw, 3vw)) { :root { --text-xs: clamp(0.75rem, calc(-0.1858782904vw + 0.7918226153rem), 0.6331290249rem); --text-s: clamp(0.8125rem, calc(0.0500373602vw + 0.8012415939rem), 0.8439609902rem); --text-m: clamp(1rem, calc(0.1988071571vw + 0.9552683897rem), 1.125rem); --text-l: clamp(1.2rem, calc(0.4765407555vw + 1.09277833rem), 1.499625rem); --text-xl: clamp(1.44rem, calc(0.8890658052vw + 1.2399601938rem), 1.999000125rem); --text-xxl: clamp(1.728rem, calc(1.489729092vw + 1.3928109543rem), 2.6646671666rem); --h6: clamp(0.75rem, calc(0.0378916323vw + 0.7414743827rem), 0.7738243638rem); --h5: clamp(0.8125rem, calc(0.3483226671vw + 0.7341273999rem), 1.031507877rem); --h4: clamp(1.25rem, calc(0.1988071571vw + 1.2052683897rem), 1.375rem); --h3: clamp(1.5rem, calc(0.5294234592vw + 1.3808797217rem), 1.832875rem); --h2: clamp(1.8rem, calc(1.0230176938vw + 1.5698210189rem), 2.443222375rem); --h1: clamp(2.16rem, calc(1.7444380531vw + 1.7675014381rem), 3.2568154259rem); } } @supports (padding: calc(1vw + 2vw)) { :root { --space-xs: calc(0.8441720333rem + (-0.0108386999 * ((100vw - 22.5rem) / 62.875))); --space-s: calc(1.1252813203rem + (0.1247186797 * ((100vw - 22.5rem) / 62.875))); --space-m: calc(1.5rem + (0.375 * ((100vw - 22.5rem) / 62.875))); --space-l: calc(1.9995rem + (0.813 * ((100vw - 22.5rem) / 62.875))); --space-xl: calc(2.6653335rem + (1.5534165 * ((100vw - 22.5rem) / 62.875))); --space-xxl: calc(3.5528895555rem + (2.7752354445 * ((100vw - 22.5rem) / 62.875))); --section-space-xs: calc(1.6883440665rem + (0.8116559335 * ((100vw - 22.5rem) / 62.875))); --section-space-s: calc(2.2505626407rem + (1.4994373593 * ((100vw - 22.5rem) / 62.875))); --section-space-m: calc(3rem + (2.625 * ((100vw - 22.5rem) / 62.875))); --section-space-l: calc(3.999rem + (4.4385 * ((100vw - 22.5rem) / 62.875))); --section-space-xl: calc(5.330667rem + (7.325583 * ((100vw - 22.5rem) / 62.875))); --section-space-xxl: calc(7.105779111rem + (11.878595889 * ((100vw - 22.5rem) / 62.875))); --section-padding-x: calc(1.25rem + (2.5 * ((100vw - 22.5rem) / 62.875))); --gutter: calc(1.25rem + (2.5 * ((100vw - 22.5rem) / 62.875))); } @media (min-width: 1367px) { :root { --space-xs: 0.8333333333rem; --space-s: 1.25rem; --space-m: 1.875rem; --space-l: 2.8125rem; --space-xl: 4.21875rem; --space-xxl: 6.328125rem; --section-space-xs: 2.5rem; --section-space-s: 3.75rem; --section-space-m: 5.625rem; --section-space-l: 8.4375rem; --section-space-xl: 12.65625rem; --section-space-xxl: 18.984375rem; --section-padding-x: 3.75rem; --gutter: 3.75rem; } } } @supports (padding: clamp(1vw, 2vw, 3vw)) { :root { --space-xs: clamp(0.8441720333rem, calc(-0.0172384889vw + 0.8480506933rem), 0.8333333333rem); --space-s: clamp(1.1252813203rem, calc(0.1983597291vw + 1.0806503813rem), 1.25rem); --space-m: clamp(1.5rem, calc(0.5964214712vw + 1.365805169rem), 1.875rem); --space-l: clamp(1.9995rem, calc(1.2930417495vw + 1.7085656064rem), 2.8125rem); --space-xl: clamp(2.6653335rem, calc(2.4706425447vw + 2.1094389274rem), 4.21875rem); --space-xxl: clamp(3.5528895555rem, calc(4.4138933511vw + 2.5597635515rem), 6.328125rem); --section-space-xs: clamp(1.6883440665rem, calc(1.2909040692vw + 1.3978906509rem), 2.5rem); --section-space-s: clamp(2.2505626407rem, calc(2.3847910288vw + 1.7139846592rem), 3.75rem); --section-space-m: clamp(3rem, calc(4.1749502982vw + 2.0606361829rem), 5.625rem); --section-space-l: clamp(3.999rem, calc(7.0592445328vw + 2.4106699801rem), 8.4375rem); --section-space-xl: clamp(5.330667rem, calc(11.6510266402vw + 2.709186006rem), 12.65625rem); --section-space-xxl: clamp(7.105779111rem, calc(18.8923990282vw + 2.8549893296rem), 18.984375rem); --section-padding-x: clamp(1.25rem, calc(3.9761431412vw + 0.3553677932rem), 3.75rem); --gutter: clamp(1.25rem, calc(3.9761431412vw + 0.3553677932rem), 3.75rem); } } .contain { container-type: inline-size; } .contain > * { container-type: inline-size; } .gap--xs.gap--xs { gap: var(--space-xs); --row-gap: var(--space-xs); --col-gap: var(--space-xs); --grid-gap: var(--space-xs); } .gap--s.gap--s { gap: var(--space-s); --row-gap: var(--space-s); --col-gap: var(--space-s); --grid-gap: var(--space-s); } .gap--m.gap--m { gap: var(--space-m); --row-gap: var(--space-m); --col-gap: var(--space-m); --grid-gap: var(--space-m); } .gap--l.gap--l { gap: var(--space-l); --row-gap: var(--space-l); --col-gap: var(--space-l); --grid-gap: var(--space-l); } .gap--xl.gap--xl { gap: var(--space-xl); --row-gap: var(--space-xl); --col-gap: var(--space-xl); --grid-gap: var(--space-xl); } .gap--xxl.gap--xxl { gap: var(--space-xxl); --row-gap: var(--space-xxl); --col-gap: var(--space-xxl); --grid-gap: var(--space-xxl); } @media (max-width: 1366px) { .gap--xl-xs.gap--xl-xs { gap: var(--space-xs); --row-gap: var(--space-xs); --col-gap: var(--space-xs); --grid-gap: var(--space-xs); } .gap--xl-s.gap--xl-s { gap: var(--space-s); --row-gap: var(--space-s); --col-gap: var(--space-s); --grid-gap: var(--space-s); } .gap--xl-m.gap--xl-m { gap: var(--space-m); --row-gap: var(--space-m); --col-gap: var(--space-m); --grid-gap: var(--space-m); } .gap--xl-l.gap--xl-l { gap: var(--space-l); --row-gap: var(--space-l); --col-gap: var(--space-l); --grid-gap: var(--space-l); } .gap--xl-xl.gap--xl-xl { gap: var(--space-xl); --row-gap: var(--space-xl); --col-gap: var(--space-xl); --grid-gap: var(--space-xl); } .gap--xl-xxl.gap--xl-xxl { gap: var(--space-xxl); --row-gap: var(--space-xxl); --col-gap: var(--space-xxl); --grid-gap: var(--space-xxl); } } @media (max-width: 992px) { .gap--l-xs.gap--l-xs { gap: var(--space-xs); --row-gap: var(--space-xs); --col-gap: var(--space-xs); --grid-gap: var(--space-xs); } .gap--l-s.gap--l-s { gap: var(--space-s); --row-gap: var(--space-s); --col-gap: var(--space-s); --grid-gap: var(--space-s); } .gap--l-m.gap--l-m { gap: var(--space-m); --row-gap: var(--space-m); --col-gap: var(--space-m); --grid-gap: var(--space-m); } .gap--l-l.gap--l-l { gap: var(--space-l); --row-gap: var(--space-l); --col-gap: var(--space-l); --grid-gap: var(--space-l); } .gap--l-xl.gap--l-xl { gap: var(--space-xl); --row-gap: var(--space-xl); --col-gap: var(--space-xl); --grid-gap: var(--space-xl); } .gap--l-xxl.gap--l-xxl { gap: var(--space-xxl); --row-gap: var(--space-xxl); --col-gap: var(--space-xxl); --grid-gap: var(--space-xxl); } } @media (max-width: 768px) { .gap--m-xs.gap--m-xs { gap: var(--space-xs); --row-gap: var(--space-xs); --col-gap: var(--space-xs); --grid-gap: var(--space-xs); } .gap--m-s.gap--m-s { gap: var(--space-s); --row-gap: var(--space-s); --col-gap: var(--space-s); --grid-gap: var(--space-s); } .gap--m-m.gap--m-m { gap: var(--space-m); --row-gap: var(--space-m); --col-gap: var(--space-m); --grid-gap: var(--space-m); } .gap--m-l.gap--m-l { gap: var(--space-l); --row-gap: var(--space-l); --col-gap: var(--space-l); --grid-gap: var(--space-l); } .gap--m-xl.gap--m-xl { gap: var(--space-xl); --row-gap: var(--space-xl); --col-gap: var(--space-xl); --grid-gap: var(--space-xl); } .gap--m-xxl.gap--m-xxl { gap: var(--space-xxl); --row-gap: var(--space-xxl); --col-gap: var(--space-xxl); --grid-gap: var(--space-xxl); } } @media (max-width: 480px) { .gap--s-xs.gap--s-xs { gap: var(--space-xs); --row-gap: var(--space-xs); --col-gap: var(--space-xs); --grid-gap: var(--space-xs); } .gap--s-s.gap--s-s { gap: var(--space-s); --row-gap: var(--space-s); --col-gap: var(--space-s); --grid-gap: var(--space-s); } .gap--s-m.gap--s-m { gap: var(--space-m); --row-gap: var(--space-m); --col-gap: var(--space-m); --grid-gap: var(--space-m); } .gap--s-l.gap--s-l { gap: var(--space-l); --row-gap: var(--space-l); --col-gap: var(--space-l); --grid-gap: var(--space-l); } .gap--s-xl.gap--s-xl { gap: var(--space-xl); --row-gap: var(--space-xl); --col-gap: var(--space-xl); --grid-gap: var(--space-xl); } .gap--s-xxl.gap--s-xxl { gap: var(--space-xxl); --row-gap: var(--space-xxl); --col-gap: var(--space-xxl); --grid-gap: var(--space-xxl); } } .col-gap--xs.col-gap--xs { column-gap: var(--space-xs); --col-gap: var(--space-xs); } .col-gap--s.col-gap--s { column-gap: var(--space-s); --col-gap: var(--space-s); } .col-gap--m.col-gap--m { column-gap: var(--space-m); --col-gap: var(--space-m); } .col-gap--l.col-gap--l { column-gap: var(--space-l); --col-gap: var(--space-l); } .col-gap--xl.col-gap--xl { column-gap: var(--space-xl); --col-gap: var(--space-xl); } .col-gap--xxl.col-gap--xxl { column-gap: var(--space-xxl); --col-gap: var(--space-xxl); } @media (max-width: 1366px) { .col-gap--xl-xs.col-gap--xl-xs { column-gap: var(--space-xs); --col-gap: var(--space-xs); } .col-gap--xl-s.col-gap--xl-s { column-gap: var(--space-s); --col-gap: var(--space-s); } .col-gap--xl-m.col-gap--xl-m { column-gap: var(--space-m); --col-gap: var(--space-m); } .col-gap--xl-l.col-gap--xl-l { column-gap: var(--space-l); --col-gap: var(--space-l); } .col-gap--xl-xl.col-gap--xl-xl { column-gap: var(--space-xl); --col-gap: var(--space-xl); } .col-gap--xl-xxl.col-gap--xl-xxl { column-gap: var(--space-xxl); --col-gap: var(--space-xxl); } } @media (max-width: 992px) { .col-gap--l-xs.col-gap--l-xs { column-gap: var(--space-xs); --col-gap: var(--space-xs); } .col-gap--l-s.col-gap--l-s { column-gap: var(--space-s); --col-gap: var(--space-s); } .col-gap--l-m.col-gap--l-m { column-gap: var(--space-m); --col-gap: var(--space-m); } .col-gap--l-l.col-gap--l-l { column-gap: var(--space-l); --col-gap: var(--space-l); } .col-gap--l-xl.col-gap--l-xl { column-gap: var(--space-xl); --col-gap: var(--space-xl); } .col-gap--l-xxl.col-gap--l-xxl { column-gap: var(--space-xxl); --col-gap: var(--space-xxl); } } @media (max-width: 768px) { .col-gap--m-xs.col-gap--m-xs { column-gap: var(--space-xs); --col-gap: var(--space-xs); } .col-gap--m-s.col-gap--m-s { column-gap: var(--space-s); --col-gap: var(--space-s); } .col-gap--m-m.col-gap--m-m { column-gap: var(--space-m); --col-gap: var(--space-m); } .col-gap--m-l.col-gap--m-l { column-gap: var(--space-l); --col-gap: var(--space-l); } .col-gap--m-xl.col-gap--m-xl { column-gap: var(--space-xl); --col-gap: var(--space-xl); } .col-gap--m-xxl.col-gap--m-xxl { column-gap: var(--space-xxl); --col-gap: var(--space-xxl); } } @media (max-width: 480px) { .col-gap--s-xs.col-gap--s-xs { column-gap: var(--space-xs); --col-gap: var(--space-xs); } .col-gap--s-s.col-gap--s-s { column-gap: var(--space-s); --col-gap: var(--space-s); } .col-gap--s-m.col-gap--s-m { column-gap: var(--space-m); --col-gap: var(--space-m); } .col-gap--s-l.col-gap--s-l { column-gap: var(--space-l); --col-gap: var(--space-l); } .col-gap--s-xl.col-gap--s-xl { column-gap: var(--space-xl); --col-gap: var(--space-xl); } .col-gap--s-xxl.col-gap--s-xxl { column-gap: var(--space-xxl); --col-gap: var(--space-xxl); } } .row-gap--xs.row-gap--xs { row-gap: var(--space-xs); --row-gap: var(--space-xs); } .row-gap--s.row-gap--s { row-gap: var(--space-s); --row-gap: var(--space-s); } .row-gap--m.row-gap--m { row-gap: var(--space-m); --row-gap: var(--space-m); } .row-gap--l.row-gap--l { row-gap: var(--space-l); --row-gap: var(--space-l); } .row-gap--xl.row-gap--xl { row-gap: var(--space-xl); --row-gap: var(--space-xl); } .row-gap--xxl.row-gap--xxl { row-gap: var(--space-xxl); --row-gap: var(--space-xxl); } @media (max-width: 1366px) { .row-gap--xl-xs.row-gap--xl-xs { row-gap: var(--space-xs); --row-gap: var(--space-xs); } .row-gap--xl-s.row-gap--xl-s { row-gap: var(--space-s); --row-gap: var(--space-s); } .row-gap--xl-m.row-gap--xl-m { row-gap: var(--space-m); --row-gap: var(--space-m); } .row-gap--xl-l.row-gap--xl-l { row-gap: var(--space-l); --row-gap: var(--space-l); } .row-gap--xl-xl.row-gap--xl-xl { row-gap: var(--space-xl); --row-gap: var(--space-xl); } .row-gap--xl-xxl.row-gap--xl-xxl { row-gap: var(--space-xxl); --row-gap: var(--space-xxl); } } @media (max-width: 992px) { .row-gap--l-xs.row-gap--l-xs { row-gap: var(--space-xs); --row-gap: var(--space-xs); } .row-gap--l-s.row-gap--l-s { row-gap: var(--space-s); --row-gap: var(--space-s); } .row-gap--l-m.row-gap--l-m { row-gap: var(--space-m); --row-gap: var(--space-m); } .row-gap--l-l.row-gap--l-l { row-gap: var(--space-l); --row-gap: var(--space-l); } .row-gap--l-xl.row-gap--l-xl { row-gap: var(--space-xl); --row-gap: var(--space-xl); } .row-gap--l-xxl.row-gap--l-xxl { row-gap: var(--space-xxl); --row-gap: var(--space-xxl); } } @media (max-width: 768px) { .row-gap--m-xs.row-gap--m-xs { row-gap: var(--space-xs); --row-gap: var(--space-xs); } .row-gap--m-s.row-gap--m-s { row-gap: var(--space-s); --row-gap: var(--space-s); } .row-gap--m-m.row-gap--m-m { row-gap: var(--space-m); --row-gap: var(--space-m); } .row-gap--m-l.row-gap--m-l { row-gap: var(--space-l); --row-gap: var(--space-l); } .row-gap--m-xl.row-gap--m-xl { row-gap: var(--space-xl); --row-gap: var(--space-xl); } .row-gap--m-xxl.row-gap--m-xxl { row-gap: var(--space-xxl); --row-gap: var(--space-xxl); } } @media (max-width: 480px) { .row-gap--s-xs.row-gap--s-xs { row-gap: var(--space-xs); --row-gap: var(--space-xs); } .row-gap--s-s.row-gap--s-s { row-gap: var(--space-s); --row-gap: var(--space-s); } .row-gap--s-m.row-gap--s-m { row-gap: var(--space-m); --row-gap: var(--space-m); } .row-gap--s-l.row-gap--s-l { row-gap: var(--space-l); --row-gap: var(--space-l); } .row-gap--s-xl.row-gap--s-xl { row-gap: var(--space-xl); --row-gap: var(--space-xl); } .row-gap--s-xxl.row-gap--s-xxl { row-gap: var(--space-xxl); --row-gap: var(--space-xxl); } } .fr-container-gap, .container-gap { --row-gap: var(--container-gap); --col-gap: var(--container-gap); gap: var(--container-gap); } .fr-content-gap, .content-gap { --row-gap: var(--content-gap); --col-gap: var(--content-gap); gap: var(--content-gap); } .fr-grid-gap, .grid-gap { --row-gap: var(--grid-gap); --col-gap: var(--grid-gap); gap: var(--grid-gap); } .gap--none { --row-gap: 0; --col-gap: 0; gap: 0; } section:where(:not(.bricks-shape-divider)) { display: flex; flex-direction: column; align-items: center; gap: var(--container-gap); } section > div:where(:not(.bricks-shape-divider)) { display: flex; flex-direction: column; align-items: flex-start; gap: var(--content-gap); } :where(:where(.brxe-block)) { gap: var(--content-gap); } :where(:where(.brxe-div)) { gap: var(--content-gap); } section > div:where([class*="grid--"]), :where([class*="grid--"]) { gap: var(--grid-gap); } :root { --f-label-size: clamp(0.875rem, calc(0.1988071571vw + 0.8302683897rem), 1rem); --f-label-font-weight: 400; --f-label-line-height: 1; --f-label-padding-x: 0; --f-label-padding-y: 0; --f-label-margin-bottom: 0.5em; --f-label-text-transform: none; --f-label-inside-position-left: 1.5em; --f-label-inside-position-top: 0; --f-label-inside-scale: 1; --f-legend-text-weight: 600; --f-legend-size: clamp(0.875rem, calc(0.1988071571vw + 0.8302683897rem), 1rem); --f-legend-margin-bottom: 1em; --f-legend-border: none; --f-legend-line-height: 1.2; --f-help-text-weight: 400; --f-help-size: clamp(0.75rem, calc(0.1988071571vw + 0.7052683897rem), 0.875rem); --f-help-line-height: 1.4; --f-help-margin-block: 0.5em 0; --f-field-margin-bottom: 1.5em; --f-fieldset-margin-bottom: 1.5em; --f-grid-gutter: 2rem; --f-input-border-style: solid; --f-input-border-top-size: 0.0625rem; --f-input-border-right-size: 0.0625rem; --f-input-border-bottom-size: 0.0625rem; --f-input-border-left-size: 0.0625rem; --f-input-border-radius: var(--btn-radius); --f-input-size: clamp(0.875rem, calc(0.3976143141vw + 0.7855367793rem), 1.125rem); --f-input-font-weight: 400; --f-input-line-height: 1; --f-input-height: 3.125rem; --f-input-padding-x: 1em; --f-input-padding-y: 0.5em; --f-btn-border-style: solid; --f-btn-border-width: var(--btn-border-width); --f-btn-border-radius: var(--btn-radius); --f-btn-text-size: clamp(0.875rem, calc(0.3976143141vw + 0.7855367793rem), 1.125rem); --f-btn-font-weight: 400; --f-btn-line-height: 1; --f-btn-padding-y: 0.75em; --f-btn-padding-x: 1.5em; --f-btn-margin-top: 0; --f-btn-text-decoration: none; --f-btn-text-transform: none; --f-option-label-font-weight: 400; --f-option-label-size: clamp(0.875rem, calc(0.1988071571vw + 0.8302683897rem), 1rem); --f-option-label-spacing: 0.5em; --f-option-label-line-height: 1.4; --f-progress-height: 1.875rem; --f-progress-bar-radius: var(--btn-radius); --f-tab-border-size: 0; --f-tab-border-style: solid; --f-tab-border-radius: 0; --f-tab-text-size: clamp(1rem, calc(0.1988071571vw + 0.9552683897rem), 1.125rem); --f-tab-text-weight: 400; --f-tab-text-line-height: 1; --f-tab-text-align: center; --f-tab-text-transform: none; --f-tab-text-decoration: none; --f-tab-padding-y: 0.75em; --f-tab-padding-x: 1.5em; --f-tab-margin-x: 0; --f-tab-width: auto; --f-tab-active-border-bottom-size: 3px; --f-tab-active-text-weight: 600; --f-tab-active-border-size: 0; --f-tab-active-border-style: solid; --f-tab-group-padding-y: 0; --f-tab-group-padding-x: 0; --f-tab-group-border-bottom-size: 2px; --f-tab-group-border-bottom-style: solid; --f-tab-group-margin-bottom: 3rem; } .form--dark input[type="date"], .form--dark input[type="datetime-local"], .form--dark input[type="month"], .form--dark input[type="password"], .form--dark input[type="search"], .form--dark input[type="time"], .form--dark input[type="week"], .form--dark input[type="email"], .form--dark input[type="number"], .form--dark input[type="tel"], .form--dark input[type="text"], .form--dark input[type="url"], .form--dark select:not([multiple]):not([size]), .form--dark .bricks-search-form input[type="date"], .form--dark .bricks-search-form input[type="datetime-local"], .form--dark .bricks-search-form input[type="month"], .form--dark .bricks-search-form input[type="password"], .form--dark .bricks-search-form input[type="search"], .form--dark .bricks-search-form input[type="time"], .form--dark .bricks-search-form input[type="week"], .form--dark .bricks-search-form input[type="email"], .form--dark .bricks-search-form input[type="number"], .form--dark .bricks-search-form input[type="tel"], .form--dark .bricks-search-form input[type="text"], .form--dark .bricks-search-form input[type="url"], .form--dark .bricks-search-form select:not([multiple]):not([size]), .form--dark .brxe-post-comments input[type="date"], .form--dark .brxe-post-comments input[type="datetime-local"], .form--dark .brxe-post-comments input[type="month"], .form--dark .brxe-post-comments input[type="password"], .form--dark .brxe-post-comments input[type="search"], .form--dark .brxe-post-comments input[type="time"], .form--dark .brxe-post-comments input[type="week"], .form--dark .brxe-post-comments input[type="email"], .form--dark .brxe-post-comments input[type="number"], .form--dark .brxe-post-comments input[type="tel"], .form--dark .brxe-post-comments input[type="text"], .form--dark .brxe-post-comments input[type="url"], .form--dark .brxe-post-comments select:not([multiple]):not([size]) { height: var(--f-input-height, 3.125rem); } .form--dark .input, .form--dark input:not([type="submit"]), .form--dark select, .form--dark textarea, .form--dark .bricks-search-form .input, .form--dark .bricks-search-form input:not([type="submit"]), .form--dark .bricks-search-form select, .form--dark .bricks-search-form textarea, .form--dark .brxe-post-comments .input, .form--dark .brxe-post-comments input:not([type="submit"]), .form--dark .brxe-post-comments select, .form--dark .brxe-post-comments textarea { background-color: var(--f-dark-input-background, var(--neutral-dark)); border-top-width: var(--f-input-border-top-size, 0.0625rem); border-right-width: var(--f-input-border-right-size, 0.0625rem); border-bottom-width: var(--f-input-border-bottom-size, 0.0625rem); border-left-width: var(--f-input-border-left-size, 0.0625rem); border-style: var(--f-input-border-style, solid); border-color: var(--f-dark-input-border-color, var(--neutral-semi-dark)); border-radius: var(--f-input-border-radius, var(--btn-radius)); color: var(--f-dark-input-text-color, var(--neutral-ultra-light)); font-size: var(--f-input-size, --text-m); font-weight: var(--f-input-font-weight, 400); line-height: var(--f-input-line-height, 1); padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 1em); -webkit-border-radius: var(--f-input-border-radius, var(--btn-radius)); -moz-border-radius: var(--f-input-border-radius, var(--btn-radius)); -ms-border-radius: var(--f-input-border-radius, var(--btn-radius)); -o-border-radius: var(--f-input-border-radius, var(--btn-radius)); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); } .form--dark .input:hover:not([data-wsf-legal]), .form--dark .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark input:not([type="submit"]):hover:not([data-wsf-legal]), .form--dark input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark select:hover:not([data-wsf-legal]), .form--dark select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark textarea:hover:not([data-wsf-legal]), .form--dark textarea:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .bricks-search-form .input:hover:not([data-wsf-legal]), .form--dark .bricks-search-form .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .bricks-search-form input:not([type="submit"]):hover:not([data-wsf-legal]), .form--dark .bricks-search-form input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .bricks-search-form select:hover:not([data-wsf-legal]), .form--dark .bricks-search-form select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .bricks-search-form textarea:hover:not([data-wsf-legal]), .form--dark .bricks-search-form textarea:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .brxe-post-comments .input:hover:not([data-wsf-legal]), .form--dark .brxe-post-comments .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .brxe-post-comments input:not([type="submit"]):hover:not([data-wsf-legal]), .form--dark .brxe-post-comments input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .brxe-post-comments select:hover:not([data-wsf-legal]), .form--dark .brxe-post-comments select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .brxe-post-comments textarea:hover:not([data-wsf-legal]), .form--dark .brxe-post-comments textarea:hover:enabled:not(:focus):not([data-wsf-legal]) { background-color: var(--f-dark-input-color-background-hover, var(--neutral-dark)); border-color: var(--f-dark-input-border-color-hover, var(--neutral-semi-dark)); color: var(--f-dark-input-text-color-hover, var(--neutral-ultra-light)); } .form--dark .input::placeholder, .form--dark input:not([type="submit"])::placeholder, .form--dark select::placeholder, .form--dark textarea::placeholder, .form--dark .bricks-search-form .input::placeholder, .form--dark .bricks-search-form input:not([type="submit"])::placeholder, .form--dark .bricks-search-form select::placeholder, .form--dark .bricks-search-form textarea::placeholder, .form--dark .brxe-post-comments .input::placeholder, .form--dark .brxe-post-comments input:not([type="submit"])::placeholder, .form--dark .brxe-post-comments select::placeholder, .form--dark .brxe-post-comments textarea::placeholder { color: var(--f-dark-input-placeholder-color, var(--neutral-ultra-light)); opacity: var(--f-dark-input-placeholder-opacity, 0.5); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); } .form--dark .input:hover::placeholder, .form--dark input:not([type="submit"]):hover::placeholder, .form--dark select:hover::placeholder, .form--dark textarea:hover::placeholder, .form--dark .bricks-search-form .input:hover::placeholder, .form--dark .bricks-search-form input:not([type="submit"]):hover::placeholder, .form--dark .bricks-search-form select:hover::placeholder, .form--dark .bricks-search-form textarea:hover::placeholder, .form--dark .brxe-post-comments .input:hover::placeholder, .form--dark .brxe-post-comments input:not([type="submit"]):hover::placeholder, .form--dark .brxe-post-comments select:hover::placeholder, .form--dark .brxe-post-comments textarea:hover::placeholder { color: var(--f-dark-input-placeholder-color-hover, var(--neutral-ultra-light)); } .form--dark .bricks-button, .form--dark .bricks-search-form .bricks-button, .form--dark .brxe-post-comments .bricks-button { background-color: var(--f-dark-btn-background, var(--primary)); color: var(--f-dark-btn-text-color, var(--primary-ultra-light)); border-style: var(--f-btn-border-style, solid); border-width: var(--f-btn-border-width, var(--btn-border-width)); border-color: var(--f-dark-btn-border-color, var(--primary)); border-radius: var(--f-btn-border-radius, var(--btn-radius)); -webkit-border-radius: var(--f-btn-border-radius, var(--btn-radius)); -moz-border-radius: var(--f-btn-border-radius, var(--btn-radius)); -ms-border-radius: var(--f-btn-border-radius, var(--btn-radius)); -o-border-radius: var(--f-btn-border-radius, var(--btn-radius)); font-size: var(--f-btn-text-size, --text-m); font-weight: var(--f-btn-font-weight, 400); line-height: var(--f-btn-line-height, 1); padding: var(--f-btn-padding-y, 0.75em) var(--f-btn-padding-x, 1.5em); margin-block-start: var(--f-btn-margin-top, 0); text-align: center; -webkit-text-decoration: var(--f-btn-text-decoration, none); text-decoration: var(--f-btn-text-decoration, none); text-transform: var(--f-btn-text-transform, none); transition: all var(--btn-transition-duration) ease; min-height: var(--f-input-height, 3.125rem); } .form--dark .bricks-button:hover, .form--dark .bricks-search-form .bricks-button:hover, .form--dark .brxe-post-comments .bricks-button:hover { background-color: var(--f-dark-btn-background-hover, var(--primary-hover)); color: var(--f-dark-btn-text-color-hover, var(--primary-ultra-light)); border-color: var(--f-dark-btn-border-color-hover, var(--primary-hover)); } .form--dark .bricks-button.bricks-background-secondary, .form--dark .bricks-search-form .bricks-button.bricks-background-secondary, .form--dark .brxe-post-comments .bricks-button.bricks-background-secondary { background-color: var(--f-dark-secondary-btn-background-color, var(--neutral-light)); color: var(--f-dark-secondary-btn-text-color, var(--neutral-ultra-dark)); border-color: var(--f-dark-secondary-btn-background-color, var(--neutral-light)); } .form--dark .bricks-button.bricks-background-secondary:hover, .form--dark .bricks-search-form .bricks-button.bricks-background-secondary:hover, .form--dark .brxe-post-comments .bricks-button.bricks-background-secondary:hover { background-color: var(--f-dark-secondary-btn-background-color-hover, var(--neutral-ultra-light)); color: var(--f-dark-secondary-btn-text-color-hover, var(--neutral-ultra-dark)); border-color: var(--f-dark-secondary-btn-background-color-hover, var(--neutral-ultra-light)); } .form--dark .form-group, .form--dark .bricks-search-form .form-group, .form--dark .brxe-post-comments .form-group { padding: 0; } .form--dark .form-group:not(.submit-button-wrapper), .form--dark .bricks-search-form .form-group:not(.submit-button-wrapper), .form--dark .brxe-post-comments .form-group:not(.submit-button-wrapper) { margin-block-end: var(--f-field-margin-bottom, 1.5em); } .form--dark .message, .form--dark .bricks-search-form .message, .form--dark .brxe-post-comments .message { margin-block-start: var(--f-field-margin-bottom, 1.5em); } .form--dark label:not(.ff-el-form-check-label), .form--dark div.label, .form--dark .bricks-search-form label:not(.ff-el-form-check-label), .form--dark .bricks-search-form div.label, .form--dark .brxe-post-comments label:not(.ff-el-form-check-label), .form--dark .brxe-post-comments div.label { background-color: var(--f-dark-label-background-color, transparent); color: var(--f-dark-label-text-color, var(--neutral-ultra-light)); font-size: var(--f-label-size, --text-m); font-weight: var(--f-label-font-weight, 400); line-height: var(--f-label-line-height, 1); margin-block-end: var(--f-label-margin-bottom, 0.5em); text-transform: var(--f-label-text-transform, none); padding: var(--f-label-padding-y, 0) var(--f-label-padding-x, 0); } .form--dark .required:after, .form--dark .bricks-search-form .required:after, .form--dark .brxe-post-comments .required:after { color: var(--f-dark-required-color, var(--action)); } .form--dark input[type="file"], .form--dark .bricks-search-form input[type="file"], .form--dark .brxe-post-comments input[type="file"] { padding: 0; } .form--dark .choose-files, .form--dark .bricks-search-form .choose-files, .form--dark .brxe-post-comments .choose-files { padding: var(--f-input-padding-y 1em, 0.5em 1em); color: var(--f-dark-upload-btn-text-color, var(--neutral-ultra-dark)); font-size: var(--f-label-size, --text-m); font-weight: var(--f-label-font-weight, 400); line-height: var(--f-label-line-height, 1); background: var(--f-dark-upload-btn-background-color, var(--neutral-light)); transition: all var(--btn-transition-duration) ease; } .form--dark .choose-files:hover, .form--dark .bricks-search-form .choose-files:hover, .form--dark .brxe-post-comments .choose-files:hover { color: var(--f-dark-upload-btn-text-color-hover, var(--neutral-ultra-dark)); background: var(--f-dark-upload-btn-background-color-hover, var(--neutral-ultra-light)); } .form--dark .file-result.show, .form--dark .bricks-search-form .file-result.show, .form--dark .brxe-post-comments .file-result.show { font-size: var(--f-label-size, --text-m); font-weight: var(--f-label-font-weight, 400); line-height: var(--f-label-line-height, 1); transition: all var(--btn-transition-duration) ease; } .form--dark .file-result.show .remove:hover, .form--dark .bricks-search-form .file-result.show .remove:hover, .form--dark .brxe-post-comments .file-result.show .remove:hover { background-color: var(--f-dark-btn-background-hover, var(--primary-hover)); color: var(--f-dark-btn-text-color-hover, var(--primary-ultra-light)); border-color: var(--f-dark-btn-border-color-hover, var(--primary-hover)); } .form--dark input[type="radio"], .form--dark .bricks-search-form input[type="radio"], .form--dark .brxe-post-comments input[type="radio"] { accent-color: var(--f-dark-option-action-color, var(--primary)); } .form--dark input[type="radio"] + label, .form--dark .bricks-search-form input[type="radio"] + label, .form--dark .brxe-post-comments input[type="radio"] + label { background-color: var(--f-dark-option-background-color, transparent); display: inline-block; color: var(--f-dark-label-text-color, var(--neutral-ultra-light)); font-family: inherit; font-size: var(--f-option-label-size, --text-m); font-weight: var(--f-option-label-font-weight, 400); line-height: var(--f-option-label-line-height, 1.4); margin: 0 0 10px; -webkit-padding-start: 1.75em; padding-inline-start: 1.75em; -webkit-padding-start: inherit; padding-inline-start: inherit; margin: 0; } .form--dark .options-wrapper li, .form--dark .bricks-search-form .options-wrapper li, .form--dark .brxe-post-comments .options-wrapper li { position: relative; } .form--dark input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input), .form--dark .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input), .form--dark .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input) { width: 0px; height: 0px; padding: 0; margin: 0; opacity: 0; position: absolute; } .form--dark input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus, .form--dark .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus, .form--dark .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus { outline: none; } .form--dark input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before, .form--dark .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before, .form--dark .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before { border-color: var(--f-dark-focus-color, var(--primary)); box-shadow: 0 0 0 4px hsl(var(--f-dark-focus-hsl, 211 85% 42%) / var(--f-dark-focus-color-opacity, 0.25)); outline: 0; } .form--dark input[type="checkbox"] + label, .form--dark .bricks-search-form input[type="checkbox"] + label, .form--dark .brxe-post-comments input[type="checkbox"] + label { background-color: var(--f-dark-option-background-color, transparent); display: inline-block; color: var(--f-dark-label-text-color, var(--neutral-ultra-light)); font-family: inherit; font-size: var(--f-option-label-size, --text-m); font-weight: var(--f-option-label-font-weight, 400); line-height: var(--f-option-label-line-height, 1.4); margin: 0 0 10px; -webkit-padding-start: 1.75em; padding-inline-start: 1.75em; background-color: unset; display: block; position: relative; margin: 0; cursor: pointer; } .form--dark input[type="checkbox"]:hover + label:before, .form--dark .bricks-search-form input[type="checkbox"]:hover + label:before, .form--dark .brxe-post-comments input[type="checkbox"]:hover + label:before { background: var(--f-dark-option-action-color, var(--primary)); box-shadow: inset 0px 0px 0px 2px transparent; } .form--dark input[type="checkbox"] + label:before, .form--dark .bricks-search-form input[type="checkbox"] + label:before, .form--dark .brxe-post-comments input[type="checkbox"] + label:before { content: ""; display: block; width: 1.4em; height: 1.4em; border: 1px solid var(--f-dark-option-border-color, var(--neutral-light)); border-radius: 0.2em; position: absolute; inset-block-start: 0; inset-inline-start: 0; -webkit-transition: all 0.2s, background 0.2s ease-in-out; transition: all 0.2s, background 0.2s ease-in-out; background-color: var(--f-dark-option-background-color, transparent); } .form--dark input[type="checkbox"]:checked + label:before, .form--dark .bricks-search-form input[type="checkbox"]:checked + label:before, .form--dark .brxe-post-comments input[type="checkbox"]:checked + label:before { background: var(--primary); box-shadow: 0 0 0 1px var(--f-dark-option-border-color, var(--neutral-light)); } .form--dark input[type="checkbox"]:checked + label:before, .form--dark .bricks-search-form input[type="checkbox"]:checked + label:before, .form--dark .brxe-post-comments input[type="checkbox"]:checked + label:before { background: var(--f-dark-option-action-color, var(--primary)); box-shadow: 0 0 0 1px var(--f-dark-option-border-color, var(--neutral-light)); } .form--dark input[type="checkbox"]:checked + label:after, .form--dark .bricks-search-form input[type="checkbox"]:checked + label:after, .form--dark .brxe-post-comments input[type="checkbox"]:checked + label:after { content: ""; cursor: pointer; display: inline-block; height: 1.5em; width: 1.5em; position: absolute; inset-block-start: 0; inset-inline-start: 0; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e") 50% no-repeat; background-size: 50%; } .form--dark select, .form--dark .bricks-search-form select, .form--dark .brxe-post-comments select { background-image: none; } .form--dark select:not(:has(+ span)), .form--dark .bricks-search-form select:not(:has(+ span)), .form--dark .brxe-post-comments select:not(:has(+ span)) { background-image: linear-gradient(45deg, transparent 50%, var(--f-dark-select-arrow-color, var(--neutral-ultra-light)) 0), linear-gradient(135deg, var(--f-dark-select-arrow-color, var(--neutral-ultra-light)) 50%, transparent 0); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px); background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; } .form--dark .options-wrapper li + li, .form--dark .bricks-search-form .options-wrapper li + li, .form--dark .brxe-post-comments .options-wrapper li + li { margin-block-start: var(--f-option-label-spacing, 0.5em); } main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_calendar td:hover, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover { background: var(--primary) !important; } .form--light input[type="date"], .form--light input[type="datetime-local"], .form--light input[type="month"], .form--light input[type="password"], .form--light input[type="search"], .form--light input[type="time"], .form--light input[type="week"], .form--light input[type="email"], .form--light input[type="number"], .form--light input[type="tel"], .form--light input[type="text"], .form--light input[type="url"], .form--light select:not([multiple]):not([size]), .form--light .bricks-search-form input[type="date"], .form--light .bricks-search-form input[type="datetime-local"], .form--light .bricks-search-form input[type="month"], .form--light .bricks-search-form input[type="password"], .form--light .bricks-search-form input[type="search"], .form--light .bricks-search-form input[type="time"], .form--light .bricks-search-form input[type="week"], .form--light .bricks-search-form input[type="email"], .form--light .bricks-search-form input[type="number"], .form--light .bricks-search-form input[type="tel"], .form--light .bricks-search-form input[type="text"], .form--light .bricks-search-form input[type="url"], .form--light .bricks-search-form select:not([multiple]):not([size]), .form--light .brxe-post-comments input[type="date"], .form--light .brxe-post-comments input[type="datetime-local"], .form--light .brxe-post-comments input[type="month"], .form--light .brxe-post-comments input[type="password"], .form--light .brxe-post-comments input[type="search"], .form--light .brxe-post-comments input[type="time"], .form--light .brxe-post-comments input[type="week"], .form--light .brxe-post-comments input[type="email"], .form--light .brxe-post-comments input[type="number"], .form--light .brxe-post-comments input[type="tel"], .form--light .brxe-post-comments input[type="text"], .form--light .brxe-post-comments input[type="url"], .form--light .brxe-post-comments select:not([multiple]):not([size]) { height: var(--f-input-height, 3.125rem); } .form--light .input, .form--light input:not([type="submit"]), .form--light select, .form--light textarea, .form--light .bricks-search-form .input, .form--light .bricks-search-form input:not([type="submit"]), .form--light .bricks-search-form select, .form--light .bricks-search-form textarea, .form--light .brxe-post-comments .input, .form--light .brxe-post-comments input:not([type="submit"]), .form--light .brxe-post-comments select, .form--light .brxe-post-comments textarea { background-color: var(--f-light-input-background, var(--white)); border-top-width: var(--f-input-border-top-size, 0.0625rem); border-right-width: var(--f-input-border-right-size, 0.0625rem); border-bottom-width: var(--f-input-border-bottom-size, 0.0625rem); border-left-width: var(--f-input-border-left-size, 0.0625rem); border-style: var(--f-input-border-style, solid); border-color: var(--f-light-input-border-color, var(--neutral-light)); border-radius: var(--f-input-border-radius, var(--btn-radius)); color: var(--f-light-input-text-color, var(--neutral-dark)); font-size: var(--f-input-size, --text-m); font-weight: var(--f-input-font-weight, 400); line-height: var(--f-input-line-height, 1); padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 1em); -webkit-border-radius: var(--f-input-border-radius, var(--btn-radius)); -moz-border-radius: var(--f-input-border-radius, var(--btn-radius)); -ms-border-radius: var(--f-input-border-radius, var(--btn-radius)); -o-border-radius: var(--f-input-border-radius, var(--btn-radius)); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); } .form--light .input:hover:not([data-wsf-legal]), .form--light .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light input:not([type="submit"]):hover:not([data-wsf-legal]), .form--light input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--light select:hover:not([data-wsf-legal]), .form--light select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light textarea:hover:not([data-wsf-legal]), .form--light textarea:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .bricks-search-form .input:hover:not([data-wsf-legal]), .form--light .bricks-search-form .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .bricks-search-form input:not([type="submit"]):hover:not([data-wsf-legal]), .form--light .bricks-search-form input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .bricks-search-form select:hover:not([data-wsf-legal]), .form--light .bricks-search-form select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .bricks-search-form textarea:hover:not([data-wsf-legal]), .form--light .bricks-search-form textarea:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .brxe-post-comments .input:hover:not([data-wsf-legal]), .form--light .brxe-post-comments .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .brxe-post-comments input:not([type="submit"]):hover:not([data-wsf-legal]), .form--light .brxe-post-comments input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .brxe-post-comments select:hover:not([data-wsf-legal]), .form--light .brxe-post-comments select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .brxe-post-comments textarea:hover:not([data-wsf-legal]), .form--light .brxe-post-comments textarea:hover:enabled:not(:focus):not([data-wsf-legal]) { background-color: var(--f-light-input-color-background-hover, var(--white)); border-color: var(--f-light-input-border-color-hover, var(--neutral-light)); color: var(--f-light-input-text-color-hover, var(--neutral-dark)); } .form--light .input::placeholder, .form--light input:not([type="submit"])::placeholder, .form--light select::placeholder, .form--light textarea::placeholder, .form--light .bricks-search-form .input::placeholder, .form--light .bricks-search-form input:not([type="submit"])::placeholder, .form--light .bricks-search-form select::placeholder, .form--light .bricks-search-form textarea::placeholder, .form--light .brxe-post-comments .input::placeholder, .form--light .brxe-post-comments input:not([type="submit"])::placeholder, .form--light .brxe-post-comments select::placeholder, .form--light .brxe-post-comments textarea::placeholder { color: var(--f-light-input-placeholder-color, var(--neutral-dark)); opacity: var(--f-light-input-placeholder-opacity, 0.5); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); } .form--light .input:hover::placeholder, .form--light input:not([type="submit"]):hover::placeholder, .form--light select:hover::placeholder, .form--light textarea:hover::placeholder, .form--light .bricks-search-form .input:hover::placeholder, .form--light .bricks-search-form input:not([type="submit"]):hover::placeholder, .form--light .bricks-search-form select:hover::placeholder, .form--light .bricks-search-form textarea:hover::placeholder, .form--light .brxe-post-comments .input:hover::placeholder, .form--light .brxe-post-comments input:not([type="submit"]):hover::placeholder, .form--light .brxe-post-comments select:hover::placeholder, .form--light .brxe-post-comments textarea:hover::placeholder { color: var(--f-light-input-placeholder-color-hover, var(--neutral-dark)); } .form--light .bricks-button, .form--light .bricks-search-form .bricks-button, .form--light .brxe-post-comments .bricks-button { background-color: var(--f-light-btn-background, var(--primary)); color: var(--f-light-btn-text-color, var(--primary-ultra-light)); border-style: var(--f-btn-border-style, solid); border-width: var(--f-btn-border-width, var(--btn-border-width)); border-color: var(--f-light-btn-border-color, var(--primary)); border-radius: var(--f-btn-border-radius, var(--btn-radius)); -webkit-border-radius: var(--f-btn-border-radius, var(--btn-radius)); -moz-border-radius: var(--f-btn-border-radius, var(--btn-radius)); -ms-border-radius: var(--f-btn-border-radius, var(--btn-radius)); -o-border-radius: var(--f-btn-border-radius, var(--btn-radius)); font-size: var(--f-btn-text-size, --text-m); font-weight: var(--f-btn-font-weight, 400); line-height: var(--f-btn-line-height, 1); padding: var(--f-btn-padding-y, 0.75em) var(--f-btn-padding-x, 1.5em); margin-block-start: var(--f-btn-margin-top, 0); text-align: center; -webkit-text-decoration: var(--f-btn-text-decoration, none); text-decoration: var(--f-btn-text-decoration, none); text-transform: var(--f-btn-text-transform, none); transition: all var(--btn-transition-duration) ease; min-height: var(--f-input-height, 3.125rem); } .form--light .bricks-button:hover, .form--light .bricks-search-form .bricks-button:hover, .form--light .brxe-post-comments .bricks-button:hover { background-color: var(--f-light-btn-background-hover, var(--primary-hover)); color: var(--f-light-btn-text-color-hover, var(--primary-ultra-light)); border-color: var(--f-light-btn-border-color-hover, var(--primary-hover)); } .form--light .bricks-button.bricks-background-secondary, .form--light .bricks-search-form .bricks-button.bricks-background-secondary, .form--light .brxe-post-comments .bricks-button.bricks-background-secondary { background-color: var(--f-light-secondary-btn-background-color, var(--neutral-light)); color: var(--f-light-secondary-btn-text-color, var(--neutral-ultra-dark)); border-color: var(--f-light-secondary-btn-background-color, var(--neutral-light)); } .form--light .bricks-button.bricks-background-secondary:hover, .form--light .bricks-search-form .bricks-button.bricks-background-secondary:hover, .form--light .brxe-post-comments .bricks-button.bricks-background-secondary:hover { background-color: var(--f-light-secondary-btn-background-color-hover, var(--neutral-ultra-light)); color: var(--f-light-secondary-btn-text-color-hover, var(--neutral-ultra-dark)); border-color: var(--f-light-secondary-btn-background-color-hover, var(--neutral-ultra-light)); } .form--light .form-group, .form--light .bricks-search-form .form-group, .form--light .brxe-post-comments .form-group { padding: 0; } .form--light .form-group:not(.submit-button-wrapper), .form--light .bricks-search-form .form-group:not(.submit-button-wrapper), .form--light .brxe-post-comments .form-group:not(.submit-button-wrapper) { margin-block-end: var(--f-field-margin-bottom, 1.5em); } .form--light .message, .form--light .bricks-search-form .message, .form--light .brxe-post-comments .message { margin-block-start: var(--f-field-margin-bottom, 1.5em); } .form--light label:not(.ff-el-form-check-label), .form--light div.label, .form--light .bricks-search-form label:not(.ff-el-form-check-label), .form--light .bricks-search-form div.label, .form--light .brxe-post-comments label:not(.ff-el-form-check-label), .form--light .brxe-post-comments div.label { background-color: var(--f-light-label-background-color, ); color: var(--f-light-label-text-color, var(--neutral-dark)); font-size: var(--f-label-size, --text-m); font-weight: var(--f-label-font-weight, 400); line-height: var(--f-label-line-height, 1); margin-block-end: var(--f-label-margin-bottom, 0.5em); text-transform: var(--f-label-text-transform, none); padding: var(--f-label-padding-y, 0) var(--f-label-padding-x, 0); } .form--light .required:after, .form--light .bricks-search-form .required:after, .form--light .brxe-post-comments .required:after { color: var(--f-light-required-color, var(--action)); } .form--light input[type="file"], .form--light .bricks-search-form input[type="file"], .form--light .brxe-post-comments input[type="file"] { padding: 0; } .form--light .choose-files, .form--light .bricks-search-form .choose-files, .form--light .brxe-post-comments .choose-files { padding: var(--f-input-padding-y 1em, 0.5em 1em); color: var(--f-light-upload-btn-text-color, var(--neutral-ultra-dark)); font-size: var(--text-s-pure, 1.42rem); font-size: calc(var(--f-label-size-min, 0.875) * 1rem + (var(--f-label-size-max, 1) - var(--f-label-size-min, 0.875) * ((100vw - 22.5rem) / 62.875))); font-size: clamp(var(--f-label-size-min, 0.875) * 1rem, calc(var(--f-label-size-max, 1) - var(--f-label-size-min, 0.875) / 62.875 * 100vw + var(--f-label-size-min, 0.875) - var(--f-label-size-max, 1) - var(--f-label-size-min, 0.875) / 62.875 * 22.5 * 1rem), var(--f-label-size-max, 1) * 1rem); font-weight: var(--f-label-font-weight, 400); line-height: var(--f-label-line-height, 1); background: var(--f-light-upload-btn-background-color, var(--neutral-light)); transition: all var(--btn-transition-duration) ease; } .form--light .choose-files:hover, .form--light .bricks-search-form .choose-files:hover, .form--light .brxe-post-comments .choose-files:hover { color: var(--f-light-upload-btn-text-color-hover, var(--neutral-ultra-dark)); background: var(--f-light-upload-btn-background-color-hover, var(--neutral-ultra-light)); } .form--light .file-result.show, .form--light .bricks-search-form .file-result.show, .form--light .brxe-post-comments .file-result.show { font-size: var(--text-s-pure, 1.42rem); font-size: calc(var(--f-label-size-min, 0.875) * 1rem + (var(--f-label-size-max, 1) - var(--f-label-size-min, 0.875) * ((100vw - 22.5rem) / 62.875))); font-size: clamp(var(--f-label-size-min, 0.875) * 1rem, calc(var(--f-label-size-max, 1) - var(--f-label-size-min, 0.875) / 62.875 * 100vw + var(--f-label-size-min, 0.875) - var(--f-label-size-max, 1) - var(--f-label-size-min, 0.875) / 62.875 * 22.5 * 1rem), var(--f-label-size-max, 1) * 1rem); font-weight: var(--f-label-font-weight, 400); line-height: var(--f-label-line-height, 1); transition: all var(--btn-transition-duration) ease; } .form--light .file-result.show .remove:hover, .form--light .bricks-search-form .file-result.show .remove:hover, .form--light .brxe-post-comments .file-result.show .remove:hover { background-color: var(--f-light-btn-background-hover, var(--primary-hover)); color: var(--f-light-btn-text-color-hover, var(--primary-ultra-light)); border-color: var(--f-light-btn-border-color-hover, var(--primary-hover)); } .form--light input[type="radio"], .form--light .bricks-search-form input[type="radio"], .form--light .brxe-post-comments input[type="radio"] { accent-color: var(--f-light-option-action-color, var(--primary)); } .form--light input[type="radio"] + label, .form--light .bricks-search-form input[type="radio"] + label, .form--light .brxe-post-comments input[type="radio"] + label { background-color: var(--f-light-option-background-color, transparent); display: inline-block; color: var(--f-light-label-text-color, var(--neutral-dark)); font-family: inherit; font-size: var(--f-option-label-size, --text-m); font-weight: var(--f-option-label-font-weight, 400); line-height: var(--f-option-label-line-height, 1.4); margin: 0 0 10px; -webkit-padding-start: 1.75em; padding-inline-start: 1.75em; -webkit-padding-start: inherit; padding-inline-start: inherit; margin: 0; } .form--light .options-wrapper li, .form--light .bricks-search-form .options-wrapper li, .form--light .brxe-post-comments .options-wrapper li { position: relative; } .form--light input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input), .form--light .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input), .form--light .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input) { width: 0px; height: 0px; padding: 0; margin: 0; opacity: 0; position: absolute; } .form--light input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus, .form--light .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus, .form--light .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus { outline: none; } .form--light input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before, .form--light .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before, .form--light .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before { border-color: var(--f-light-focus-color, var(--primary)); box-shadow: 0 0 0 4px hsl(var(--f-light-focus-hsl, 211 85% 42%) / var(--f-light-focus-color-opacity, 0.25)); outline: 0; } .form--light input[type="checkbox"] + label, .form--light .bricks-search-form input[type="checkbox"] + label, .form--light .brxe-post-comments input[type="checkbox"] + label { background-color: var(--f-light-option-background-color, transparent); display: inline-block; color: var(--f-light-label-text-color, var(--neutral-dark)); font-family: inherit; font-size: var(--f-option-label-size, --text-m); font-weight: var(--f-option-label-font-weight, 400); line-height: var(--f-option-label-line-height, 1.4); margin: 0 0 10px; -webkit-padding-start: 1.75em; padding-inline-start: 1.75em; background-color: unset; display: block; position: relative; margin: 0; cursor: pointer; } .form--light input[type="checkbox"]:hover + label:before, .form--light .bricks-search-form input[type="checkbox"]:hover + label:before, .form--light .brxe-post-comments input[type="checkbox"]:hover + label:before { background: var(--f-light-option-action-color, var(--primary)); box-shadow: inset 0px 0px 0px 2px transparent; } .form--light input[type="checkbox"] + label:before, .form--light .bricks-search-form input[type="checkbox"] + label:before, .form--light .brxe-post-comments input[type="checkbox"] + label:before { content: ""; display: block; width: 1.4em; height: 1.4em; border: 1px solid var(--f-light-option-border-color, var(--neutral)); border-radius: 0.2em; position: absolute; inset-block-start: 0; inset-inline-start: 0; -webkit-transition: all 0.2s, background 0.2s ease-in-out; transition: all 0.2s, background 0.2s ease-in-out; background-color: var(--f-light-option-background-color, transparent); } .form--light input[type="checkbox"]:checked + label:before, .form--light .bricks-search-form input[type="checkbox"]:checked + label:before, .form--light .brxe-post-comments input[type="checkbox"]:checked + label:before { background: var(--primary); box-shadow: 0 0 0 1px var(--f-light-option-border-color, var(--neutral)); } .form--light input[type="checkbox"]:checked + label:before, .form--light .bricks-search-form input[type="checkbox"]:checked + label:before, .form--light .brxe-post-comments input[type="checkbox"]:checked + label:before { background: var(--f-light-option-action-color, var(--primary)); box-shadow: 0 0 0 1px var(--f-light-option-border-color, var(--neutral)); } .form--light input[type="checkbox"]:checked + label:after, .form--light .bricks-search-form input[type="checkbox"]:checked + label:after, .form--light .brxe-post-comments input[type="checkbox"]:checked + label:after { content: ""; cursor: pointer; display: inline-block; height: 1.5em; width: 1.5em; position: absolute; inset-block-start: 0; inset-inline-start: 0; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e") 50% no-repeat; background-size: 50%; } .form--light select, .form--light .bricks-search-form select, .form--light .brxe-post-comments select { background-image: none; } .form--light select:not(:has(+ span)), .form--light .bricks-search-form select:not(:has(+ span)), .form--light .brxe-post-comments select:not(:has(+ span)) { background-image: linear-gradient(45deg, transparent 50%, var(--f-light-select-arrow-color, var(--neutral)) 0), linear-gradient(135deg, var(--f-light-select-arrow-color, var(--neutral)) 50%, transparent 0); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px); background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; } .form--light .options-wrapper li + li, .form--light .bricks-search-form .options-wrapper li + li, .form--light .brxe-post-comments .options-wrapper li + li { margin-block-start: var(--f-option-label-spacing, 0.5em); } main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_calendar td:hover, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover { background: var(--primary) !important; } #shadow-host-companion { padding: 0; } .border:where(:not(:is(figure, picture))), .border:where(figure, picture) > img { border: var(--border); border-radius: var(--radius); } .border-light:where(:not(:is(figure, picture))), .border-light:where(figure, picture) > img { border: var(--border-light); border-radius: var(--radius); } .border-dark:where(:not(:is(figure, picture))), .border-dark:where(figure, picture) > img { border: var(--border-dark); border-radius: var(--radius); } .border-top:where(:not(:is(figure, picture))), .border-top:where(figure, picture) > img { border-block-start: var(--border); } .border-top--light:where(:not(:is(figure, picture))), .border-top--light:where(figure, picture) > img { border-block-start: var(--border-light); } .border-top--dark:where(:not(:is(figure, picture))), .border-top--dark:where(figure, picture) > img { border-block-start: var(--border-dark); } .border-bottom:where(:not(:is(figure, picture))), .border-bottom:where(figure, picture) > img { border-block-end: var(--border); } .border-bottom--light:where(:not(:is(figure, picture))), .border-bottom--light:where(figure, picture) > img { border-block-end: var(--border-light); } .border-bottom--dark:where(:not(:is(figure, picture))), .border-bottom--dark:where(figure, picture) > img { border-block-end: var(--border-dark); } .border-left:where(:not(:is(figure, picture))), .border-left:where(figure, picture) > img { border-inline-start: var(--border); } .border-left--light:where(:not(:is(figure, picture))), .border-left--light:where(figure, picture) > img { border-inline-start: var(--border-light); } .border-left--dark:where(:not(:is(figure, picture))), .border-left--dark:where(figure, picture) > img { border-inline-start: var(--border-dark); } .border-right:where(:not(:is(figure, picture))), .border-right:where(figure, picture) > img { border-inline-end: var(--border); } .border-right--light:where(:not(:is(figure, picture))), .border-right--light:where(figure, picture) > img { border-inline-end: var(--border-light); } .border-right--dark:where(:not(:is(figure, picture))), .border-right--dark:where(figure, picture) > img { border-inline-end: var(--border-dark); } .border-block:where(:not(:is(figure, picture))), .border-block:where(figure, picture) > img { border-block: var(--border); } .border-block--light:where(:not(:is(figure, picture))), .border-block--light:where(figure, picture) > img { border-block: var(--border-light); } .border-block--dark:where(:not(:is(figure, picture))), .border-block--dark:where(figure, picture) > img { border-block: var(--border-dark); } .border-inline:where(:not(:is(figure, picture))), .border-inline:where(figure, picture) > img { border-inline: var(--border); } .border-inline--light:where(:not(:is(figure, picture))), .border-inline--light:where(figure, picture) > img { border-inline: var(--border-light); } .border-inline--dark:where(:not(:is(figure, picture))), .border-inline--dark:where(figure, picture) > img { border-inline: var(--border-dark); } .radius { border-radius: var(--radius); } .radius--50.radius--50, .rounded--50.rounded--50 { border-radius: var(--radius-50); } .radius--circle.radius--circle, .rounded--circle.rounded--circle { border-radius: var(--radius-circle); } .radius--none.radius--none, .rounded--none.rounded--none { border-radius: var(--radius-none); } .radius--xs.radius--xs, .rounded--xs.rounded--xs { border-radius: var(--radius-xs); } .radius--s.radius--s, .rounded--s.rounded--s { border-radius: var(--radius-s); } .radius--m.radius--m, .rounded--m.rounded--m { border-radius: var(--radius-m); } .radius--l.radius--l, .rounded--l.rounded--l { border-radius: var(--radius-l); } .radius--xl.radius--xl, .rounded--xl.rounded--xl { border-radius: var(--radius-xl); } .radius--xxl.radius--xxl, .rounded--xxl.rounded--xxl { border-radius: var(--radius-xxl); } :where(img):not(header img), :where(figure:not(figure:has(img))) { border-radius: var(--radius); } .acss-auto-radius :where(img):not(header img), .acss-auto-radius :where(figure:not(figure:has(img))) { border-radius: var(--radius); } .divider-bottom.divider-bottom { position: relative; overflow: visible; margin-block-end: calc(var(--divider-gap) * 2); } .divider-bottom.divider-bottom::after { inset-block-end: calc(var(--divider-gap) * -1 - var(--divider-size)); } .divider-bottom.divider-bottom::after { content: ""; display: block; position: absolute; inset-inline-start: 0; inline-size: var(--divider-inline-size); border-block-end: var(--divider); } .divider-top.divider-top { position: relative; overflow: visible; margin-block-start: calc(var(--divider-gap) * 2); } .divider-top.divider-top::after { inset-block-start: calc(var(--divider-gap) * -1 - var(--divider-size)); } .divider-top.divider-top::after { content: ""; display: block; position: absolute; inset-inline-start: 0; inline-size: var(--divider-inline-size); border-block-end: var(--divider); } .divider--all.divider--all { row-gap: 0; } .divider--all.divider--all > *:not(:last-child) { position: relative; overflow: visible; margin-block-end: calc(var(--divider-gap) * 2); } .divider--all.divider--all > *:not(:last-child)::after { inset-block-end: calc(var(--divider-gap) * -1 - var(--divider-size)); } .divider--all.divider--all > *:not(:last-child)::after { content: ""; display: block; position: absolute; inset-inline-start: 0; inline-size: var(--divider-inline-size); border-block-end: var(--divider); } a[class*="link--"], [class*="link--"] a, button[class*="link--"], [class*="link--"] button { color: var(--link-color); text-decoration-color: var(--link-color); } a[class*="link--"]:hover, [class*="link--"] a:hover, button[class*="link--"]:hover, [class*="link--"] button:hover { color: var(--link-color-hover); text-decoration-color: var(--link-color-hover); } button[class*="link--"], [class*="link--"] button { background: transparent; } .link--primary { --link-color: var(--primary); --link-color-hover: var(--primary-hover); } .link-hover--primary.link-hover--primary { --link-color-hover: var(--primary); } .link--primary-hover { --link-color: var(--primary-hover); --link-color-hover: var(--primary-hover-hover); } .link-hover--primary-hover.link-hover--primary-hover { --link-color-hover: var(--primary-hover); } .link--primary-ultra-light { --link-color: var(--primary-ultra-light); --link-color-hover: var(--primary-ultra-light-hover); } .link-hover--primary-ultra-light.link-hover--primary-ultra-light { --link-color-hover: var(--primary-ultra-light); } .link--primary-light { --link-color: var(--primary-light); --link-color-hover: var(--primary-light-hover); } .link-hover--primary-light.link-hover--primary-light { --link-color-hover: var(--primary-light); } .link--primary-semi-light { --link-color: var(--primary-semi-light); --link-color-hover: var(--primary-semi-light-hover); } .link-hover--primary-semi-light.link-hover--primary-semi-light { --link-color-hover: var(--primary-semi-light); } .link--primary-semi-dark { --link-color: var(--primary-semi-dark); --link-color-hover: var(--primary-semi-dark-hover); } .link-hover--primary-semi-dark.link-hover--primary-semi-dark { --link-color-hover: var(--primary-semi-dark); } .link--primary-dark { --link-color: var(--primary-dark); --link-color-hover: var(--primary-dark-hover); } .link-hover--primary-dark.link-hover--primary-dark { --link-color-hover: var(--primary-dark); } .link--primary-ultra-dark { --link-color: var(--primary-ultra-dark); --link-color-hover: var(--primary-ultra-dark-hover); } .link-hover--primary-ultra-dark.link-hover--primary-ultra-dark { --link-color-hover: var(--primary-ultra-dark); } .link--secondary { --link-color: var(--secondary); --link-color-hover: var(--secondary-hover); } .link-hover--secondary.link-hover--secondary { --link-color-hover: var(--secondary); } .link--secondary-hover { --link-color: var(--secondary-hover); --link-color-hover: var(--secondary-hover-hover); } .link-hover--secondary-hover.link-hover--secondary-hover { --link-color-hover: var(--secondary-hover); } .link--secondary-ultra-light { --link-color: var(--secondary-ultra-light); --link-color-hover: var(--secondary-ultra-light-hover); } .link-hover--secondary-ultra-light.link-hover--secondary-ultra-light { --link-color-hover: var(--secondary-ultra-light); } .link--secondary-light { --link-color: var(--secondary-light); --link-color-hover: var(--secondary-light-hover); } .link-hover--secondary-light.link-hover--secondary-light { --link-color-hover: var(--secondary-light); } .link--secondary-semi-light { --link-color: var(--secondary-semi-light); --link-color-hover: var(--secondary-semi-light-hover); } .link-hover--secondary-semi-light.link-hover--secondary-semi-light { --link-color-hover: var(--secondary-semi-light); } .link--secondary-semi-dark { --link-color: var(--secondary-semi-dark); --link-color-hover: var(--secondary-semi-dark-hover); } .link-hover--secondary-semi-dark.link-hover--secondary-semi-dark { --link-color-hover: var(--secondary-semi-dark); } .link--secondary-dark { --link-color: var(--secondary-dark); --link-color-hover: var(--secondary-dark-hover); } .link-hover--secondary-dark.link-hover--secondary-dark { --link-color-hover: var(--secondary-dark); } .link--secondary-ultra-dark { --link-color: var(--secondary-ultra-dark); --link-color-hover: var(--secondary-ultra-dark-hover); } .link-hover--secondary-ultra-dark.link-hover--secondary-ultra-dark { --link-color-hover: var(--secondary-ultra-dark); } .link--tertiary { --link-color: var(--tertiary); --link-color-hover: var(--tertiary-hover); } .link-hover--tertiary.link-hover--tertiary { --link-color-hover: var(--tertiary); } .link--tertiary-hover { --link-color: var(--tertiary-hover); --link-color-hover: var(--tertiary-hover-hover); } .link-hover--tertiary-hover.link-hover--tertiary-hover { --link-color-hover: var(--tertiary-hover); } .link--tertiary-ultra-light { --link-color: var(--tertiary-ultra-light); --link-color-hover: var(--tertiary-ultra-light-hover); } .link-hover--tertiary-ultra-light.link-hover--tertiary-ultra-light { --link-color-hover: var(--tertiary-ultra-light); } .link--tertiary-light { --link-color: var(--tertiary-light); --link-color-hover: var(--tertiary-light-hover); } .link-hover--tertiary-light.link-hover--tertiary-light { --link-color-hover: var(--tertiary-light); } .link--tertiary-semi-light { --link-color: var(--tertiary-semi-light); --link-color-hover: var(--tertiary-semi-light-hover); } .link-hover--tertiary-semi-light.link-hover--tertiary-semi-light { --link-color-hover: var(--tertiary-semi-light); } .link--tertiary-semi-dark { --link-color: var(--tertiary-semi-dark); --link-color-hover: var(--tertiary-semi-dark-hover); } .link-hover--tertiary-semi-dark.link-hover--tertiary-semi-dark { --link-color-hover: var(--tertiary-semi-dark); } .link--tertiary-dark { --link-color: var(--tertiary-dark); --link-color-hover: var(--tertiary-dark-hover); } .link-hover--tertiary-dark.link-hover--tertiary-dark { --link-color-hover: var(--tertiary-dark); } .link--tertiary-ultra-dark { --link-color: var(--tertiary-ultra-dark); --link-color-hover: var(--tertiary-ultra-dark-hover); } .link-hover--tertiary-ultra-dark.link-hover--tertiary-ultra-dark { --link-color-hover: var(--tertiary-ultra-dark); } .link--accent { --link-color: var(--accent); --link-color-hover: var(--accent-hover); } .link-hover--accent.link-hover--accent { --link-color-hover: var(--accent); } .link--accent-hover { --link-color: var(--accent-hover); --link-color-hover: var(--accent-hover-hover); } .link-hover--accent-hover.link-hover--accent-hover { --link-color-hover: var(--accent-hover); } .link--accent-ultra-light { --link-color: var(--accent-ultra-light); --link-color-hover: var(--accent-ultra-light-hover); } .link-hover--accent-ultra-light.link-hover--accent-ultra-light { --link-color-hover: var(--accent-ultra-light); } .link--accent-light { --link-color: var(--accent-light); --link-color-hover: var(--accent-light-hover); } .link-hover--accent-light.link-hover--accent-light { --link-color-hover: var(--accent-light); } .link--accent-semi-light { --link-color: var(--accent-semi-light); --link-color-hover: var(--accent-semi-light-hover); } .link-hover--accent-semi-light.link-hover--accent-semi-light { --link-color-hover: var(--accent-semi-light); } .link--accent-semi-dark { --link-color: var(--accent-semi-dark); --link-color-hover: var(--accent-semi-dark-hover); } .link-hover--accent-semi-dark.link-hover--accent-semi-dark { --link-color-hover: var(--accent-semi-dark); } .link--accent-dark { --link-color: var(--accent-dark); --link-color-hover: var(--accent-dark-hover); } .link-hover--accent-dark.link-hover--accent-dark { --link-color-hover: var(--accent-dark); } .link--accent-ultra-dark { --link-color: var(--accent-ultra-dark); --link-color-hover: var(--accent-ultra-dark-hover); } .link-hover--accent-ultra-dark.link-hover--accent-ultra-dark { --link-color-hover: var(--accent-ultra-dark); } .link--base { --link-color: var(--base); --link-color-hover: var(--base-hover); } .link-hover--base.link-hover--base { --link-color-hover: var(--base); } .link--base-hover { --link-color: var(--base-hover); --link-color-hover: var(--base-hover-hover); } .link-hover--base-hover.link-hover--base-hover { --link-color-hover: var(--base-hover); } .link--base-ultra-light { --link-color: var(--base-ultra-light); --link-color-hover: var(--base-ultra-light-hover); } .link-hover--base-ultra-light.link-hover--base-ultra-light { --link-color-hover: var(--base-ultra-light); } .link--base-light { --link-color: var(--base-light); --link-color-hover: var(--base-light-hover); } .link-hover--base-light.link-hover--base-light { --link-color-hover: var(--base-light); } .link--base-semi-light { --link-color: var(--base-semi-light); --link-color-hover: var(--base-semi-light-hover); } .link-hover--base-semi-light.link-hover--base-semi-light { --link-color-hover: var(--base-semi-light); } .link--base-semi-dark { --link-color: var(--base-semi-dark); --link-color-hover: var(--base-semi-dark-hover); } .link-hover--base-semi-dark.link-hover--base-semi-dark { --link-color-hover: var(--base-semi-dark); } .link--base-dark { --link-color: var(--base-dark); --link-color-hover: var(--base-dark-hover); } .link-hover--base-dark.link-hover--base-dark { --link-color-hover: var(--base-dark); } .link--base-ultra-dark { --link-color: var(--base-ultra-dark); --link-color-hover: var(--base-ultra-dark-hover); } .link-hover--base-ultra-dark.link-hover--base-ultra-dark { --link-color-hover: var(--base-ultra-dark); } .link--neutral { --link-color: var(--neutral); --link-color-hover: var(--neutral-hover); } .link-hover--neutral.link-hover--neutral { --link-color-hover: var(--neutral); } .link--neutral-hover { --link-color: var(--neutral-hover); --link-color-hover: var(--neutral-hover-hover); } .link-hover--neutral-hover.link-hover--neutral-hover { --link-color-hover: var(--neutral-hover); } .link--neutral-ultra-light { --link-color: var(--neutral-ultra-light); --link-color-hover: var(--neutral-ultra-light-hover); } .link-hover--neutral-ultra-light.link-hover--neutral-ultra-light { --link-color-hover: var(--neutral-ultra-light); } .link--neutral-light { --link-color: var(--neutral-light); --link-color-hover: var(--neutral-light-hover); } .link-hover--neutral-light.link-hover--neutral-light { --link-color-hover: var(--neutral-light); } .link--neutral-semi-light { --link-color: var(--neutral-semi-light); --link-color-hover: var(--neutral-semi-light-hover); } .link-hover--neutral-semi-light.link-hover--neutral-semi-light { --link-color-hover: var(--neutral-semi-light); } .link--neutral-semi-dark { --link-color: var(--neutral-semi-dark); --link-color-hover: var(--neutral-semi-dark-hover); } .link-hover--neutral-semi-dark.link-hover--neutral-semi-dark { --link-color-hover: var(--neutral-semi-dark); } .link--neutral-dark { --link-color: var(--neutral-dark); --link-color-hover: var(--neutral-dark-hover); } .link-hover--neutral-dark.link-hover--neutral-dark { --link-color-hover: var(--neutral-dark); } .link--neutral-ultra-dark { --link-color: var(--neutral-ultra-dark); --link-color-hover: var(--neutral-ultra-dark-hover); } .link-hover--neutral-ultra-dark.link-hover--neutral-ultra-dark { --link-color-hover: var(--neutral-ultra-dark); } .link--white { --link-color: var(--white); --link-color-hover: var(--white-hover); } .link-hover--white.link-hover--white { --link-color-hover: var(--white); } .link--black { --link-color: var(--black); --link-color-hover: var(--black-hover); } .link-hover--black.link-hover--black { --link-color-hover: var(--black); } .transition { transition: var(--transition); } [data-icon]:is(svg, i, a) { display: flex; flex-shrink: 0; align-items: center; justify-content: center; box-sizing: content-box; color: var(--icon-color, var(--neutral-dark)); font-size: var(--icon-size); height: var(--icon-height, var(--icon-size, 24px)); width: var(--icon-width, var(--icon-size, 24px)); transition: var(--icon-transition, var(--transition)); padding: var(--icon-padding, 12px); border-width: var(--icon-border-width, 0); border-style: var(--icon-border-style, solid); border-radius: var(--icon-radius, var(--radius)); background: var(--icon-background, var(--neutral-ultra-light)); border-color: var(--icon-border-color, transparent); box-shadow: var(--icon-shadow, none); } [data-icon]:is(i)::before { width: 100%; height: 100%; text-align: center; font-size: var(--icon-size); } [data-icon].brxe-icon { font-size: var(--icon-size); } [data-icon] svg { color: var(--icon-color); } [data-icon]:is(a):hover, [data-icon] [data-icon-hover]:hover, [data-icon] [data-icon-hover]:hover [data-icon] { --icon-background: var(--icon-background-hover); --icon-color: var(--icon-color-hover); --icon-border-color: var(--icon-border-color-hover); } .icon--s, [data-icon-size="s"] { --icon-size: var(--icon-size-s); --icon-padding: var(--icon-padding-s); } .icon--m, [data-icon-size="m"] { --icon-size: var(--icon-size-m); --icon-padding: var(--icon-padding-m); } .icon--l, [data-icon-size="l"] { --icon-size: var(--icon-size-l); --icon-padding: var(--icon-padding-l); } .icon--light, [data-icon-theme="light"] { --icon-color: var(--primary-light); --icon-color-hover: var(--primary-ultra-light); --icon-background: var(--primary-dark); --icon-background-hover: var(--primary-ultra-dark); --icon-border-color: var(--primary-dark-trans-10); --icon-border-color-hover: var(--primary-dark-trans-10); --icon-shadow: ; } .icon--dark, [data-icon-theme="dark"] { --icon-color: var(--primary-dark); --icon-color-hover: var(--primary-semi-dark); --icon-background: var(--primary-light); --icon-background-hover: var(--primary-ultra-light); --icon-border-color: var(--primary-dark-trans-10); --icon-border-color-hover: var(--primary-dark-trans-10); --icon-shadow: ; } .icon--boxed, [data-icon-style="boxed"] { padding: var(--icon-padding, 12px); border-width: var(--icon-border-width, 0); border-style: var(--icon-border-style, solid); border-radius: var(--icon-radius, var(--radius)); background: var(--icon-background, var(--neutral-ultra-light)); border-color: var(--icon-border-color, transparent); } .icon--naked, [data-icon-style="naked"] { --icon-background: transparent; --icon-border-width: 0; --icon-padding: 0; } :is([data-icon-list], .icon-list) { display: flex; flex-direction: column; gap: var(--icon-list-gap, 1em); } :is([data-icon-list], .icon-list) :where(svg, i) { --icon-size: var(--icon-list-icon-size, 1em); position: relative; translate: var(--icon-inline-offset, 0) var(--icon-block-offset, 0); flex-shrink: 0; } :is([data-icon-list], .icon-list) :where(svg, i):is(svg, i, a) { display: flex; flex-shrink: 0; align-items: center; justify-content: center; box-sizing: content-box; color: var(--icon-color, var(--neutral-dark)); font-size: var(--icon-size); height: var(--icon-height, var(--icon-size, 24px)); width: var(--icon-width, var(--icon-size, 24px)); transition: var(--icon-transition, var(--transition)); box-shadow: var(--icon-shadow, none); } :is([data-icon-list], .icon-list) :where(svg, i):is(i)::before { width: 100%; height: 100%; text-align: center; font-size: var(--icon-size); } :is([data-icon-list], .icon-list) :where(svg, i).brxe-icon { font-size: var(--icon-size); } :is([data-icon-list], .icon-list) :where(svg, i) svg { color: var(--icon-color); } :is([data-icon-list], .icon-list) :where(svg, i):is(a):hover, :is([data-icon-list], .icon-list) :where(svg, i) [data-icon-hover]:hover, :is([data-icon-list], .icon-list) :where(svg, i) [data-icon-hover]:hover [data-icon] { --icon-background: var(--icon-background-hover); --icon-color: var(--icon-color-hover); --icon-border-color: var(--icon-border-color-hover); } :is([data-icon-list], .icon-list) a:hover { --icon-color: var(--icon-color-hover, var(--primary)); --icon-background: var(--icon-background-hover, var(--primary-hover)); } :where(a:has(> svg, > i)):hover { --icon-color: var(--icon-color-hover, var(--primary)); --icon-background: var(--icon-background-hover, var(--primary-hover)); } .fade--block { --fade-amount: 25%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black var(--fade-amount), black calc(100% - var(--fade-amount)), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black var(--fade-amount), black calc(100% - var(--fade-amount)), transparent 100%); } .fade--inline { --fade-amount: 25%; -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--fade-amount), black calc(100% - var(--fade-amount)), transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black var(--fade-amount), black calc(100% - var(--fade-amount)), transparent 100%); } .fade--top { --fade-amount: 25%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black var(--fade-amount)); mask-image: linear-gradient(to bottom, transparent 0%, black var(--fade-amount)); } .fade--right { --fade-amount: 25%; -webkit-mask-image: linear-gradient(to left, transparent 0%, black var(--fade-amount)); mask-image: linear-gradient(to left, transparent 0%, black var(--fade-amount)); } .fade--bottom { --fade-amount: 25%; -webkit-mask-image: linear-gradient(to top, transparent 0%, black var(--fade-amount)); mask-image: linear-gradient(to top, transparent 0%, black var(--fade-amount)); } .fade--left { --fade-amount: 25%; -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--fade-amount)); mask-image: linear-gradient(to right, transparent 0%, black var(--fade-amount)); }