/* File: automatic.css - Version: 3.3.5 - Generated: 2025-06-13 12:32:10 */ .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: #003A62; --primary-hsl: 204 100% 19%; --primary-rgb: 0 58 98; --primary-r: 0; --primary-g: 58; --primary-b: 98; --primary-h: 204; --primary-s: 100%; --primary-l: 19%; --primary-hover-h: 204; --primary-hover-s: 100%; --primary-hover-l: 22%; --primary-ultra-light-h: 204; --primary-ultra-light-s: 100%; --primary-ultra-light-l: 95%; --primary-light-h: 204; --primary-light-s: 100%; --primary-light-l: 85%; --primary-semi-light-h: 204; --primary-semi-light-s: 100%; --primary-semi-light-l: 65%; --primary-semi-dark-h: 204; --primary-semi-dark-s: 100%; --primary-semi-dark-l: 35%; --primary-dark-h: 204; --primary-dark-s: 100%; --primary-dark-l: 25%; --primary-ultra-dark-h: 204; --primary-ultra-dark-s: 100%; --primary-ultra-dark-l: 10%; --secondary-hex: #FF8200; --secondary-hsl: 31 100% 50%; --secondary-rgb: 255 130 0; --secondary-r: 255; --secondary-g: 130; --secondary-b: 0; --secondary-h: 31; --secondary-s: 100%; --secondary-l: 50%; --secondary-hover-h: 31; --secondary-hover-s: 100%; --secondary-hover-l: 57%; --secondary-ultra-light-h: 31; --secondary-ultra-light-s: 100%; --secondary-ultra-light-l: 95%; --secondary-light-h: 31; --secondary-light-s: 100%; --secondary-light-l: 85%; --secondary-semi-light-h: 31; --secondary-semi-light-s: 100%; --secondary-semi-light-l: 61%; --secondary-semi-dark-h: 31; --secondary-semi-dark-s: 100%; --secondary-semi-dark-l: 35%; --secondary-dark-h: 31; --secondary-dark-s: 100%; --secondary-dark-l: 25%; --secondary-ultra-dark-h: 31; --secondary-ultra-dark-s: 100%; --secondary-ultra-dark-l: 10%; --neutral-hex: #000000; --neutral-hsl: 0 0% 0%; --neutral-rgb: 0 0 0; --neutral-r: 0; --neutral-g: 0; --neutral-b: 0; --neutral-h: 0; --neutral-s: 0%; --neutral-l: 0%; --neutral-hover-h: 0; --neutral-hover-s: 0%; --neutral-hover-l: 0%; --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: 52%; --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: 10%; --primary: #003A62; --primary-hover: #004370; --primary-ultra-light: #e5f5ff; --primary-light: #b3e0ff; --primary-semi-light: #4db8ff; --primary-semi-dark: #006bb3; --primary-dark: #004c80; --primary-ultra-dark: #001f33; --secondary: #FF8200; --secondary-hover: #ff9524; --secondary-ultra-light: #fff3e5; --secondary-light: #ffdab3; --secondary-semi-light: #ff9f38; --secondary-semi-dark: #b35c00; --secondary-dark: #804200; --secondary-ultra-dark: #331a00; --neutral: #000000; --neutral-hover: black; --neutral-ultra-light: #f2f2f2; --neutral-light: #d9d9d9; --neutral-semi-light: #858585; --neutral-semi-dark: #595959; --neutral-dark: #404040; --neutral-ultra-dark: #1a1a1a; --white: #fff; --black: #000; --primary-trans-10: rgba(0, 58, 98, 0.1); --primary-trans-20: rgba(0, 58, 98, 0.2); --primary-trans-30: rgba(0, 58, 98, 0.3); --primary-trans-40: rgba(0, 58, 98, 0.4); --primary-trans-50: rgba(0, 58, 98, 0.5); --primary-trans-60: rgba(0, 58, 98, 0.6); --primary-trans-70: rgba(0, 58, 98, 0.7); --primary-trans-80: rgba(0, 58, 98, 0.8); --primary-trans-90: rgba(0, 58, 98, 0.9); --primary-light-trans-10: rgba(179, 224, 255, 0.1); --primary-light-trans-20: rgba(179, 224, 255, 0.2); --primary-light-trans-30: rgba(179, 224, 255, 0.3); --primary-light-trans-40: rgba(179, 224, 255, 0.4); --primary-light-trans-50: rgba(179, 224, 255, 0.5); --primary-light-trans-60: rgba(179, 224, 255, 0.6); --primary-light-trans-70: rgba(179, 224, 255, 0.7); --primary-light-trans-80: rgba(179, 224, 255, 0.8); --primary-light-trans-90: rgba(179, 224, 255, 0.9); --primary-dark-trans-10: rgba(0, 76, 128, 0.1); --primary-dark-trans-20: rgba(0, 76, 128, 0.2); --primary-dark-trans-30: rgba(0, 76, 128, 0.3); --primary-dark-trans-40: rgba(0, 76, 128, 0.4); --primary-dark-trans-50: rgba(0, 76, 128, 0.5); --primary-dark-trans-60: rgba(0, 76, 128, 0.6); --primary-dark-trans-70: rgba(0, 76, 128, 0.7); --primary-dark-trans-80: rgba(0, 76, 128, 0.8); --primary-dark-trans-90: rgba(0, 76, 128, 0.9); --primary-ultra-dark-trans-10: rgba(0, 31, 51, 0.1); --primary-ultra-dark-trans-20: rgba(0, 31, 51, 0.2); --primary-ultra-dark-trans-30: rgba(0, 31, 51, 0.3); --primary-ultra-dark-trans-40: rgba(0, 31, 51, 0.4); --primary-ultra-dark-trans-50: rgba(0, 31, 51, 0.5); --primary-ultra-dark-trans-60: rgba(0, 31, 51, 0.6); --primary-ultra-dark-trans-70: rgba(0, 31, 51, 0.7); --primary-ultra-dark-trans-80: rgba(0, 31, 51, 0.8); --primary-ultra-dark-trans-90: rgba(0, 31, 51, 0.9); --secondary-trans-10: rgba(255, 130, 0, 0.1); --secondary-trans-20: rgba(255, 130, 0, 0.2); --secondary-trans-30: rgba(255, 130, 0, 0.3); --secondary-trans-40: rgba(255, 130, 0, 0.4); --secondary-trans-50: rgba(255, 130, 0, 0.5); --secondary-trans-60: rgba(255, 130, 0, 0.6); --secondary-trans-70: rgba(255, 130, 0, 0.7); --secondary-trans-80: rgba(255, 130, 0, 0.8); --secondary-trans-90: rgba(255, 130, 0, 0.9); --secondary-light-trans-10: rgba(255, 218, 179, 0.1); --secondary-light-trans-20: rgba(255, 218, 179, 0.2); --secondary-light-trans-30: rgba(255, 218, 179, 0.3); --secondary-light-trans-40: rgba(255, 218, 179, 0.4); --secondary-light-trans-50: rgba(255, 218, 179, 0.5); --secondary-light-trans-60: rgba(255, 218, 179, 0.6); --secondary-light-trans-70: rgba(255, 218, 179, 0.7); --secondary-light-trans-80: rgba(255, 218, 179, 0.8); --secondary-light-trans-90: rgba(255, 218, 179, 0.9); --secondary-dark-trans-10: rgba(128, 66, 0, 0.1); --secondary-dark-trans-20: rgba(128, 66, 0, 0.2); --secondary-dark-trans-30: rgba(128, 66, 0, 0.3); --secondary-dark-trans-40: rgba(128, 66, 0, 0.4); --secondary-dark-trans-50: rgba(128, 66, 0, 0.5); --secondary-dark-trans-60: rgba(128, 66, 0, 0.6); --secondary-dark-trans-70: rgba(128, 66, 0, 0.7); --secondary-dark-trans-80: rgba(128, 66, 0, 0.8); --secondary-dark-trans-90: rgba(128, 66, 0, 0.9); --secondary-ultra-dark-trans-10: rgba(51, 26, 0, 0.1); --secondary-ultra-dark-trans-20: rgba(51, 26, 0, 0.2); --secondary-ultra-dark-trans-30: rgba(51, 26, 0, 0.3); --secondary-ultra-dark-trans-40: rgba(51, 26, 0, 0.4); --secondary-ultra-dark-trans-50: rgba(51, 26, 0, 0.5); --secondary-ultra-dark-trans-60: rgba(51, 26, 0, 0.6); --secondary-ultra-dark-trans-70: rgba(51, 26, 0, 0.7); --secondary-ultra-dark-trans-80: rgba(51, 26, 0, 0.8); --secondary-ultra-dark-trans-90: rgba(51, 26, 0, 0.9); --neutral-trans-10: rgba(0, 0, 0, 0.1); --neutral-trans-20: rgba(0, 0, 0, 0.2); --neutral-trans-30: rgba(0, 0, 0, 0.3); --neutral-trans-40: rgba(0, 0, 0, 0.4); --neutral-trans-50: rgba(0, 0, 0, 0.5); --neutral-trans-60: rgba(0, 0, 0, 0.6); --neutral-trans-70: rgba(0, 0, 0, 0.7); --neutral-trans-80: rgba(0, 0, 0, 0.8); --neutral-trans-90: rgba(0, 0, 0, 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(26, 26, 26, 0.1); --neutral-ultra-dark-trans-20: rgba(26, 26, 26, 0.2); --neutral-ultra-dark-trans-30: rgba(26, 26, 26, 0.3); --neutral-ultra-dark-trans-40: rgba(26, 26, 26, 0.4); --neutral-ultra-dark-trans-50: rgba(26, 26, 26, 0.5); --neutral-ultra-dark-trans-60: rgba(26, 26, 26, 0.6); --neutral-ultra-dark-trans-70: rgba(26, 26, 26, 0.7); --neutral-ultra-dark-trans-80: rgba(26, 26, 26, 0.8); --neutral-ultra-dark-trans-90: rgba(26, 26, 26, 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); } :root { --on: initial; --off: ; --section-padding-x: 2rem; --section-padding-block: var(--section-space-m); --section-gutter: 2rem; --gutter: 2rem; --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: 62.5%; --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: 120rem; --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: 0.2rem; --focus-offset: 0.25em; --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-line-height: calc(2px + 2ex); --heading-font-weight: 700; --heading-text-wrap: pretty; --base-heading-lh: calc(2px + 2ex); --h1-font-weight: 800; --h1-max-width: 100%; --h2-font-weight: 800; --h2-max-width: 100%; --h3-font-weight: 800; --h3-max-width: 100%; --h4-line-height: calc(2px + 2ex); --h4-max-width: 100%; --h5-max-width: 100%; --h6-max-width: 100%; --text-color: var(--text-dark); --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.7, (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.7, (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.7, (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.7, (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.7, (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.7, (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.7, (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.7, (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.7, (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.7, (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.7, (100% - (12 - 1) * var(--grid-gap)) / 12)), 1fr)); --auto-grid-aggressiveness: 0.7; } :root { --header-height: 11.9rem; --header-height-xl: 11.9rem; --header-height-l: 11.9rem; --header-height-m: 11.9rem; --header-height-s: 11.9rem; } @media (max-width: 1200px) { :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 { --offset: 11.9rem; --offset-xl: 11.9rem; --offset-l: 11.9rem; --offset-m: 11.9rem; --offset-s: 11.9rem; } @media (max-width: 1200px) { :root { --offset: var(--offset-xl); } } @media (max-width: 992px) { :root { --offset: var(--offset-l); } } @media (max-width: 768px) { :root { --offset: var(--offset-m); } } @media (max-width: 480px) { :root { --offset: var(--offset-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; --btn-padding-block: 0.7em; --btn-padding-inline: 1.3em; --btn-min-width: 14rem; --btn-line-height: 1.2; --btn-font-weight: 700; --btn-font-style: normal; --btn-text-decoration: none; --btn-text-decoration-hover: none; --btn-letter-spacing: 0; --btn-text-transform: none; --btn-border-width: 0; --btn-outline-border-width: 2px; --btn-border-style: solid; --btn-border-radius: 0; --btn-justify-content: center; --btn-text-align: center; } :root { --btn-font-size: clamp(2rem, calc(1.4285714286vw + 1.4857142857rem), 3.2rem); --btn-text-size: clamp(2rem, calc(1.4285714286vw + 1.4857142857rem), 3.2rem); } /* Deprecated in ACSS 2.7 */ :root { --btn-border-size: 0; --btn-radius: 0; --outline-btn-border-size: 2px; --btn-pad-x: 1.3em; --btn-pad-y: 0.7em; --btn-text-style: normal; --btn-weight: 700; --btn-width: 14; } :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 { --card-padding: var(--space-l); --card-gap: calc(var(--content-gap) / 2); --card-border-width: var(--border-width); --card-border-style: solid; --card-display: flex; --card-radius: var(--radius); --card-heading-size: var(--h3); --card-text-size: var(--text-s); --card-button-font-size: var(--text-s); --card-icon-size: 48px; --card-line-height: 1.4; --card-avatar-radius: 50vw; --card-avatar-border-width: var(--border-width); --card-avatar-border-style: var(--border-style); --card-avatar-size: 60px; --card-avatar-aspect-ratio: 1; --card-media-radius: var(--radius); --card-media-aspect-ratio: 1.3333333333; --card-media-object-fit: cover; --card-icon-radius: var(--icon-radius); } :root, .color-scheme--main, .color-scheme--alt { --light-card-background: var(--white); --light-card-background-hover: var(--light-card-background); --light-card-heading-color: var(--text-dark); --light-card-text-color: var(--text-dark-muted); --light-card-link-color: var(--primary); --light-card-button-style: primary; --dark-card-background: var(--black); --dark-card-background-hover: var(--dark-card-background); --dark-card-heading-color: var(--text-light); --dark-card-text-color: var(--text-light-muted); --dark-card-link-color: var(--primary); --dark-card-link-color-hover: var(--primary-hover); --dark-card-button-style: primary; } :root { --fr-card-padding:,; } :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-link: var(--primary); --bg-ultra-light-link-hover: var(--primary-hover); --bg-light-link: var(--primary); --bg-light-link-hover: var(--primary-hover); --bg-dark-link: var(--primary); --bg-dark-link-hover: var(--primary-hover); --bg-ultra-dark-link: var(--primary); --bg-ultra-dark-link-hover: var(--primary-hover); --bg-ultra-light-button: primary; --bg-light-button: primary; --bg-dark-button: primary; --bg-ultra-dark-button: primary; } :root { --radius: 1rem; --radius-50: 50%; --radius-circle: 50vw; --radius-none: 0; --radius-m: var(--radius); --border-size: 1px; --border-width: 1px; --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); --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); } 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; } } #bricks-blank-canvas > .actions, body:not(:has([data-sticky-header="0"]), .content-offset--off) main:not(.panel-content) > *:first-child > *:first-child:not(.bricks-shape-divider), main > *:first-child > .bricks-shape-divider ~ .brxe-container { margin-block-start: var(--header-height); } 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; } h1, h2, h3 { text-align: center; } .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) + *, .smart-spacing.smart-spacing > :is(figure, blockquote, ul, ol) + * { --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) + *, .brxe-post-content:where(:not([data-source="bricks"])) > :is(figure, blockquote, ul, ol) + * { --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) + * { --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--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); } img { display: block; margin: 0 auto; max-width: 100%; } picture img { border-radius: 14px; margin: 20px auto; } :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, 110px)) [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, 110px)) [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); --bg-ultra-light-link: var(--primary); --bg-ultra-light-link-hover: var(--primary-hover); --bg-light-link: var(--primary); --bg-light-link-hover: var(--primary-hover); --bg-dark-link: var(--primary); --bg-dark-link-hover: var(--primary-hover); --bg-ultra-dark-link: var(--primary); --bg-ultra-dark-link-hover: var(--primary-hover); } .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); --bg-ultra-light-link: var(--primary); --bg-ultra-light-link-hover: var(--primary-hover); --bg-light-link: var(--primary); --bg-light-link-hover: var(--primary-hover); --bg-dark-link: var(--primary); --bg-dark-link-hover: var(--primary-hover); --bg-ultra-dark-link: var(--primary); --bg-ultra-dark-link-hover: var(--primary-hover); } :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 :is(a):where(:not([class*= btn--], header a, footer a, #submenu-lateral a, :is(h1, h2, h3, h4, h5, h6) a)) { color: var(--bg-ultra-light-link); } .bg--ultra-light :is(a):where(:not([class*= btn--], header a, footer a, #submenu-lateral a, :is(h1, h2, h3, h4, h5, h6) a)):hover { color: var(--bg-ultra-light-link-hover); } .bg--light :is(a):where(:not([class*= btn--], header a, footer a, #submenu-lateral a, :is(h1, h2, h3, h4, h5, h6) a)) { color: var(--bg-light-link); } .bg--light :is(a):where(:not([class*= btn--], header a, footer a, #submenu-lateral a, :is(h1, h2, h3, h4, h5, h6) a)):hover { color: var(--bg-light-link-hover); } .bg--dark :is(a):where(:not([class*= btn--], header a, footer a, #submenu-lateral a, :is(h1, h2, h3, h4, h5, h6) a)) { color: var(--bg-dark-link); } .bg--dark :is(a):where(:not([class*= btn--], header a, footer a, #submenu-lateral a, :is(h1, h2, h3, h4, h5, h6) a)):hover { color: var(--bg-dark-link-hover); } .bg--ultra-dark :is(a):where(:not([class*= btn--], header a, footer a, #submenu-lateral a, :is(h1, h2, h3, h4, h5, h6) a)) { color: var(--bg-ultra-dark-link); } .bg--ultra-dark :is(a):where(:not([class*= btn--], header a, footer a, #submenu-lateral a, :is(h1, h2, h3, h4, h5, h6) a)):hover { color: var(--bg-ultra-dark-link-hover); } .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(--white); --btn-text-color-hover: var(--primary-ultra-light); --btn-border-width: 2px; --btn-border-color: var(--white); --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(--white); --btn-text-color-hover: var(--primary-ultra-light); --btn-border-width: 2px; --btn-border-color: var(--white); --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(--white); --btn-text-color-hover: var(--primary-ultra-light); --btn-border-width: 2px; --btn-border-color: var(--white); --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(--white); --btn-text-color-hover: var(--primary-ultra-light); --btn-border-width: 2px; --btn-border-color: var(--white); --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: 1200px) { .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: 1200px) { .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: 1200px) { .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; } .card { --concentric-radius: calc(var(--radius) + var(--card-padding) / 2); --card-background: var(--light-card-background); --card-background-hover: var(--light-card-background-hover); --card-heading-color: var(--light-card-heading-color); --card-text-color: var(--light-card-text-color); --card-link-color: var(--light-card-link-color); --card-button-style: var(--light-card-button-style); display: var(--card-display, flex) !important; flex-direction: var(--card-flex-direction, column); position: relative; overflow: var(--card-overflow, clip); background-clip: padding-box; transition: var(--card-transition, var(--transition)); font-size: var(--card-text-size, var(--text-s)); border-width: var(--card-border-width, var(--border-width)); border-style: var(--card-border-style, var(--border-style)); border-color: var(--card-border-color, transparent); border-radius: var(--card-radius, var(--radius, 0)); padding: var(--card-padding, var(--space-m)); gap: var(--card-gap, var(--content-gap)); background: var(--card-background, var(--white)); color: var(--card-text-color, var(--text-dark)); line-height: var(--card-line-height, inherit); } .card:hover { background: var(--card-background-hover, var(--card-background)); } .card :where([class*="__media"]:not([class*="wrapper"])) { border-radius: var(--card-media-radius, var(--radius, 0)); aspect-ratio: var(--card-media-aspect-ratio, 16/9); object-fit: var(--card-media-object-fit, fill); overflow: clip; inline-size: 100%; } .card :where([class*="__media"]:not([class*="wrapper"])) img { object-fit: var(--card-media-object-fit, fill); } .card img[class*="__avatar"]:not([class*="wrapper"]), .card [class*="__avatar"] img { border-radius: var(--card-avatar-radius, 50vw); border-width: var(--card-avatar-border-width, 0); border-style: var(--card-avatar-border-style, solid); border-color: var(--card-avatar-border-color, transparent); inline-size: var(--card-avatar-size, 48px); block-size: var(--card-avatar-size, 48px); align-self: center; aspect-ratio: 1; object-fit: cover; overflow: clip; } .card img[class*="__avatar"]:not([class*="wrapper"]) img, .card [class*="__avatar"] img img { object-fit: cover; } .card :is(h1, h2, h3, h4, h5, h6) { font-size: var(--card-heading-size, var(--h3)); color: var(--card-heading-color, var(--text-dark)); } .card :where(a):where(:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, [class*="btn--"], [data-icon])) { color: var(--card-link-color, var(--primary)); } .card :where(a):where(:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, [class*="btn--"], [data-icon])):hover { color: var(--card-link-hover-color, var(--primary-hover)); } .card :where([class*="__icon"]) { --icon-radius: var(--card-icon-radius, var(--radius, 0)); --icon-size: var(--card-icon-size, 48px); } .card [class*="btn--"] { --btn-font-size: var(--card-button-font-size, var(--text-s)); --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); } .card:where([class*="--alt"]) { --concentric-radius: calc(var(--radius) + var(--card-padding) / 2); --card-background: var(--dark-card-background); --card-background-hover: var(--dark-card-background-hover); --card-heading-color: var(--dark-card-heading-color); --card-text-color: var(--dark-card-text-color); --card-link-color: var(--dark-card-link-color); --card-link-color-hover: var(--dark-card-link-color-hover); --card-button-style: var(--dark-card-button-style); } .card:where([class*="--alt"]) :where([class*="__icon"]) { --icon-radius: var(--card-icon-radius, var(--radius, 0)); --icon-size: var(--card-icon-size, 48px); --icon-color: var(--primary-light); --icon-color-hover: var(--primary-semi-light); --icon-background: var(--primary-dark); --icon-background-hover: var(--primary-semi-dark); --icon-border-color: var(--border-color-dark); --icon-border-color-hover: var(--border-color-dark); --icon-shadow: ; } .card:where([class*="--alt"]) :where([class*="__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); } .card:where([class*="--alt"]) :where([class*="__icon"]):is(i)::before { width: 100%; height: 100%; text-align: center; font-size: var(--icon-size); } .card:where([class*="--alt"]) :where([class*="__icon"]).brxe-icon { font-size: var(--icon-size); } .card:where([class*="--alt"]) :where([class*="__icon"]) svg { color: var(--icon-color); } .card:where([class*="--alt"]) :where([class*="__icon"]):is(a):hover, .card:where([class*="--alt"]) :where([class*="__icon"]) [data-icon-hover]:hover, .card:where([class*="--alt"]) :where([class*="__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); } .card:where([class*="--alt"]) :where([data-icon]) { --icon-color: var(--primary-light); --icon-color-hover: var(--primary-semi-light); --icon-background: var(--primary-dark); --icon-background-hover: var(--primary-semi-dark); --icon-border-color: var(--border-color-dark); --icon-border-color-hover: var(--border-color-dark); --icon-shadow: ; } .card:where([class*="--alt"]) :where([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); } .card:where([class*="--alt"]) :where([data-icon]):is(i)::before { width: 100%; height: 100%; text-align: center; font-size: var(--icon-size); } .card:where([class*="--alt"]) :where([data-icon]).brxe-icon { font-size: var(--icon-size); } .card:where([class*="--alt"]) :where([data-icon]) svg { color: var(--icon-color); } .card:where([class*="--alt"]) :where([data-icon]):is(a):hover, .card:where([class*="--alt"]) :where([data-icon]) [data-icon-hover]:hover, .card:where([class*="--alt"]) :where([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); } .card:where([class*="--alt"]) [class*="btn--"] { --btn-font-size: var(--card-button-font-size, var(--text-s)); --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); } .card:where([class*="--light"]) { --concentric-radius: calc(var(--radius) + var(--card-padding) / 2); --card-background: var(--light-card-background); --card-background-hover: var(--light-card-background-hover); --card-heading-color: var(--light-card-heading-color); --card-text-color: var(--light-card-text-color); --card-link-color: var(--light-card-link-color); --card-button-style: var(--light-card-button-style); } .card:where([class*="--light"]) :where([class*="__icon"]) { --icon-radius: var(--card-icon-radius, var(--radius, 0)); --icon-size: var(--card-icon-size, 48px); --icon-color: var(--primary-dark); --icon-color-hover: var(--primary-semi-dark); --icon-background: var(--primary-ultra-light); --icon-background-hover: var(--primary-light); --icon-border-color: var(--border-color-light); --icon-border-color-hover: var(--border-color-light); --icon-shadow: ; } .card:where([class*="--light"]) :where([class*="__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); } .card:where([class*="--light"]) :where([class*="__icon"]):is(i)::before { width: 100%; height: 100%; text-align: center; font-size: var(--icon-size); } .card:where([class*="--light"]) :where([class*="__icon"]).brxe-icon { font-size: var(--icon-size); } .card:where([class*="--light"]) :where([class*="__icon"]) svg { color: var(--icon-color); } .card:where([class*="--light"]) :where([class*="__icon"]):is(a):hover, .card:where([class*="--light"]) :where([class*="__icon"]) [data-icon-hover]:hover, .card:where([class*="--light"]) :where([class*="__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); } .card:where([class*="--light"]) :where([data-icon]) { --icon-color: var(--primary-dark); --icon-color-hover: var(--primary-semi-dark); --icon-background: var(--primary-ultra-light); --icon-background-hover: var(--primary-light); --icon-border-color: var(--border-color-light); --icon-border-color-hover: var(--border-color-light); --icon-shadow: ; } .card:where([class*="--light"]) :where([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); } .card:where([class*="--light"]) :where([data-icon]):is(i)::before { width: 100%; height: 100%; text-align: center; font-size: var(--icon-size); } .card:where([class*="--light"]) :where([data-icon]).brxe-icon { font-size: var(--icon-size); } .card:where([class*="--light"]) :where([data-icon]) svg { color: var(--icon-color); } .card:where([class*="--light"]) :where([data-icon]):is(a):hover, .card:where([class*="--light"]) :where([data-icon]) [data-icon-hover]:hover, .card:where([class*="--light"]) :where([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); } .card:where([class*="--light"]) [class*="btn--"] { --btn-font-size: var(--card-button-font-size, var(--text-s)); --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); } .card:where([class*="--dark"]) { --concentric-radius: calc(var(--radius) + var(--card-padding) / 2); --card-background: var(--dark-card-background); --card-background-hover: var(--dark-card-background-hover); --card-heading-color: var(--dark-card-heading-color); --card-text-color: var(--dark-card-text-color); --card-link-color: var(--dark-card-link-color); --card-link-color-hover: var(--dark-card-link-color-hover); --card-button-style: var(--dark-card-button-style); } .card:where([class*="--dark"]) :where([class*="__icon"]) { --icon-radius: var(--card-icon-radius, var(--radius, 0)); --icon-size: var(--card-icon-size, 48px); --icon-color: var(--primary-light); --icon-color-hover: var(--primary-semi-light); --icon-background: var(--primary-dark); --icon-background-hover: var(--primary-semi-dark); --icon-border-color: var(--border-color-dark); --icon-border-color-hover: var(--border-color-dark); --icon-shadow: ; } .card:where([class*="--dark"]) :where([class*="__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); } .card:where([class*="--dark"]) :where([class*="__icon"]):is(i)::before { width: 100%; height: 100%; text-align: center; font-size: var(--icon-size); } .card:where([class*="--dark"]) :where([class*="__icon"]).brxe-icon { font-size: var(--icon-size); } .card:where([class*="--dark"]) :where([class*="__icon"]) svg { color: var(--icon-color); } .card:where([class*="--dark"]) :where([class*="__icon"]):is(a):hover, .card:where([class*="--dark"]) :where([class*="__icon"]) [data-icon-hover]:hover, .card:where([class*="--dark"]) :where([class*="__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); } .card:where([class*="--dark"]) :where([data-icon]) { --icon-color: var(--primary-light); --icon-color-hover: var(--primary-semi-light); --icon-background: var(--primary-dark); --icon-background-hover: var(--primary-semi-dark); --icon-border-color: var(--border-color-dark); --icon-border-color-hover: var(--border-color-dark); --icon-shadow: ; } .card:where([class*="--dark"]) :where([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); } .card:where([class*="--dark"]) :where([data-icon]):is(i)::before { width: 100%; height: 100%; text-align: center; font-size: var(--icon-size); } .card:where([class*="--dark"]) :where([data-icon]).brxe-icon { font-size: var(--icon-size); } .card:where([class*="--dark"]) :where([data-icon]) svg { color: var(--icon-color); } .card:where([class*="--dark"]) :where([data-icon]):is(a):hover, .card:where([class*="--dark"]) :where([data-icon]) [data-icon-hover]:hover, .card:where([class*="--dark"]) :where([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); } .card:where([class*="--dark"]) [class*="btn--"] { --btn-font-size: var(--card-button-font-size, var(--text-s)); --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); } [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--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--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); font-weight: var(--h1-font-weight); max-width: var(--h1-max-width); } .h2.h2, .h--2.h--2 { font-size: var(--h2); font-weight: var(--h2-font-weight); max-width: var(--h2-max-width); } .h3.h3, .h--3.h--3 { font-size: var(--h3); font-weight: var(--h3-font-weight); 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: 1201px) { .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: 1200px) { [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: 1200px) { .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: 1200px) { .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: 1200px) { .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: 1200px) { .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--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: 1200px) { .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: 1200px) { .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: 1201px) { .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: 1200px) { .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: 1200px) { .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: 1200px) { .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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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.7; --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: 1200px) { .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: 1201px) { .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: 1200px) { .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: 1200px) { .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: 1200px) { .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: 1200px) { .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: 1200px) { .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--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: 1200px) { .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: 1200px) { .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(1.2rem + (-0.074437289 * ((100vw - 36rem) / 84))); --text-s: calc(1.3rem + (0.2003750938 * ((100vw - 36rem) / 84))); --text-m: calc(1.6rem + (0.4 * ((100vw - 36rem) / 84))); --text-l: calc(1.92rem + (0.746 * ((100vw - 36rem) / 84))); --text-xl: calc(2.304rem + (1.249778 * ((100vw - 36rem) / 84))); --text-xxl: calc(2.7648rem + (1.972386074 * ((100vw - 36rem) / 84))); --h6: calc(1.2rem + (0.0381189821 * ((100vw - 36rem) / 84))); --h5: calc(1.3rem + (0.3504126032 * ((100vw - 36rem) / 84))); --h4: calc(1.8rem + (0.4 * ((100vw - 36rem) / 84))); --h3: calc(2.16rem + (-0.16 * ((100vw - 36rem) / 84))); --h2: calc(2.592rem + (0.608 * ((100vw - 36rem) / 84))); --h1: calc(3.1104rem + (3.2896 * ((100vw - 36rem) / 84))); } @media (min-width: 1201px) { :root { --text-xs: 1.125562711rem; --text-s: 1.5003750938rem; --text-m: 2rem; --text-l: 2.666rem; --text-xl: 3.553778rem; --text-xxl: 4.737186074rem; --h6: 1.2381189821rem; --h5: 1.6504126032rem; --h4: 2.2rem; --h3: 2rem; --h2: 3.2rem; --h1: 6.4rem; } } } @supports (font-size: clamp(1vw, 2vw, 3vw)) { :root { --text-xs: clamp(1.2rem, calc(-0.0886158202vw + 1.2319016953rem), 1.125562711rem); --text-s: clamp(1.3rem, calc(0.2385417783vw + 1.2141249598rem), 1.5003750938rem); --text-m: clamp(1.6rem, calc(0.4761904762vw + 1.4285714286rem), 2rem); --text-l: clamp(1.92rem, calc(0.8880952381vw + 1.6002857143rem), 2.666rem); --text-xl: clamp(2.304rem, calc(1.4878309524vw + 1.7683808571rem), 3.553778rem); --text-xxl: clamp(2.7648rem, calc(2.3480786595vw + 1.9194916826rem), 4.737186074rem); --h6: clamp(1.2rem, calc(0.0453797406vw + 1.1836632934rem), 1.2381189821rem); --h5: clamp(1.3rem, calc(0.4171578609vw + 1.1498231701rem), 1.6504126032rem); --h4: clamp(1.8rem, calc(0.4761904762vw + 1.6285714286rem), 2.2rem); --h3: clamp(2.16rem, calc(-0.1904761905vw + 2.2285714286rem), 2rem); --h2: clamp(2.592rem, calc(0.7238095238vw + 2.3314285714rem), 3.2rem); --h1: clamp(3.1104rem, calc(3.9161904762vw + 1.7005714286rem), 6.4rem); } } @supports (padding: calc(1vw + 2vw)) { :root { --space-xs: calc(1.3506752532rem + (-0.0173419199 * ((100vw - 36rem) / 84))); --space-s: calc(1.8004501125rem + (0.1995498875 * ((100vw - 36rem) / 84))); --space-m: calc(2.4rem + (0.6 * ((100vw - 36rem) / 84))); --space-l: calc(3.1992rem + (1.3008 * ((100vw - 36rem) / 84))); --space-xl: calc(4.2645336rem + (2.4854664 * ((100vw - 36rem) / 84))); --space-xxl: calc(5.6846232888rem + (4.4403767112 * ((100vw - 36rem) / 84))); --section-space-xs: calc(2.7013505064rem + (1.2986494936 * ((100vw - 36rem) / 84))); --section-space-s: calc(3.6009002251rem + (2.3990997749 * ((100vw - 36rem) / 84))); --section-space-m: calc(4.8rem + (4.2 * ((100vw - 36rem) / 84))); --section-space-l: calc(6.3984rem + (7.1016 * ((100vw - 36rem) / 84))); --section-space-xl: calc(8.5290672rem + (11.7209328 * ((100vw - 36rem) / 84))); --section-space-xxl: calc(11.3692465776rem + (19.0057534224 * ((100vw - 36rem) / 84))); --section-padding-x: calc(2rem + (4 * ((100vw - 36rem) / 84))); --gutter: calc(2rem + (4 * ((100vw - 36rem) / 84))); } @media (min-width: 1201px) { :root { --space-xs: 1.3333333333rem; --space-s: 2rem; --space-m: 3rem; --space-l: 4.5rem; --space-xl: 6.75rem; --space-xxl: 10.125rem; --section-space-xs: 4rem; --section-space-s: 6rem; --section-space-m: 9rem; --section-space-l: 13.5rem; --section-space-xl: 20.25rem; --section-space-xxl: 30.375rem; --section-padding-x: 6rem; --gutter: 6rem; } } } @supports (padding: clamp(1vw, 2vw, 3vw)) { :root { --space-xs: clamp(1.3506752532rem, calc(-0.0206451427vw + 1.3581075046rem), 1.3333333333rem); --space-s: clamp(1.8004501125rem, calc(0.2375593898vw + 1.7149287322rem), 2rem); --space-m: clamp(2.4rem, calc(0.7142857143vw + 2.1428571429rem), 3rem); --space-l: clamp(3.1992rem, calc(1.5485714286vw + 2.6417142857rem), 4.5rem); --space-xl: clamp(4.2645336rem, calc(2.9588885714vw + 3.1993337143rem), 6.75rem); --space-xxl: clamp(5.6846232888rem, calc(5.2861627514vw + 3.7816046983rem), 10.125rem); --section-space-xs: clamp(2.7013505064rem, calc(1.5460113019vw + 2.1447864377rem), 4rem); --section-space-s: clamp(3.6009002251rem, calc(2.8560711606vw + 2.5727146072rem), 6rem); --section-space-m: clamp(4.8rem, calc(5vw + 3rem), 9rem); --section-space-l: clamp(6.3984rem, calc(8.4542857143vw + 3.3548571429rem), 13.5rem); --section-space-xl: clamp(8.5290672rem, calc(13.9534914286vw + 3.5058102857rem), 20.25rem); --section-space-xxl: clamp(11.3692465776rem, calc(22.6258969314vw + 3.2239236823rem), 30.375rem); --section-padding-x: clamp(2rem, calc(4.7619047619vw + 0.2857142857rem), 6rem); --gutter: clamp(2rem, calc(4.7619047619vw + 0.2857142857rem), 6rem); } } .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: 1200px) { .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: 1200px) { .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: 1200px) { .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 { --fr-bg-light: var(--bg-light); --fr-bg-dark: var(--bg-dark); --fr-text-light: var(--text-light); --fr-text-dark: var(--text-dark); --fr-card-padding: var(--card-padding, var(--space-m)); --fr-card-gap: var(--card-gap, var(--space-s)); --fr-card-border-size: var(--card-border-width, 0.15rem); --fr-card-border-color: var(--card-border-color, var(--neutral-light)); --fr-card-border-style: var(--card-border-style, solid); --fr-card-radius: var(--card-radius, var(--radius-xs)); --fr-card-avatar-radius: var(--card-avatar-radius, 50%); --fr-lede-width: 60ch; --fr-list-pad-y: 0.75em; --fr-list-pad-x: 1.25em; --fr-hero-padding: var(--section-space-xl); } .fr-lede, p.fr-lede { max-width: 60ch; } .fr-hero-padding { padding-block: var(--fr-hero-padding); } .fr-text--light { color: var(--text-light); } .fr-text--dark { color: var(--text-dark); } .fr-bg--light { background-color: var(--bg-light); } .fr-bg--dark { background-color: var(--bg-dark); } :root { --f-label-size: clamp(1.4rem, calc(0.2380952381vw + 1.3142857143rem), 1.6rem); --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(1.4rem, calc(0.2380952381vw + 1.3142857143rem), 1.6rem); --f-legend-margin-bottom: 1em; --f-legend-border: none; --f-legend-line-height: 1.2; --f-help-text-weight: 400; --f-help-size: clamp(1.2rem, calc(0.2380952381vw + 1.1142857143rem), 1.4rem); --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.1rem; --f-input-border-right-size: 0.1rem; --f-input-border-bottom-size: 0.1rem; --f-input-border-left-size: 0.1rem; --f-input-border-radius: var(--btn-radius); --f-input-size: clamp(1.4rem, calc(0.4761904762vw + 1.2285714286rem), 1.8rem); --f-input-font-weight: 400; --f-input-line-height: 1; --f-input-height: 5rem; --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(1.4rem, calc(0.4761904762vw + 1.2285714286rem), 1.8rem); --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(1.4rem, calc(0.2380952381vw + 1.3142857143rem), 1.6rem); --f-option-label-spacing: 0.5em; --f-option-label-line-height: 1.4; --f-progress-height: 3rem; --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(1.6rem, calc(0.2380952381vw + 1.5142857143rem), 1.8rem); --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, 5rem); } .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.1rem); border-right-width: var(--f-input-border-right-size, 0.1rem); border-bottom-width: var(--f-input-border-bottom-size, 0.1rem); border-left-width: var(--f-input-border-left-size, 0.1rem); border-style: var(--f-input-border-style, solid); border-color: var(--f-dark-input-border-color, var(--neutral-medium)); 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(--secondary)); 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, 5rem); } .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(--secondary-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(--secondary-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, 204 100% 19%) / 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)); 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)); } .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)); } .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, 5rem); } .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.1rem); border-right-width: var(--f-input-border-right-size, 0.1rem); border-bottom-width: var(--f-input-border-bottom-size, 0.1rem); border-left-width: var(--f-input-border-left-size, 0.1rem); 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(--secondary)); 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(--secondary)); 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, 5rem); } .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(--secondary-hover)); color: var(--f-light-btn-text-color-hover, var(--primary-ultra-light)); border-color: var(--f-light-btn-border-color-hover, var(--secondary-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, 1.4) * 1rem + (var(--f-label-size-max, 1.6) - var(--f-label-size-min, 1.4) * ((100vw - 36rem) / 84))); font-size: clamp(var(--f-label-size-min, 1.4) * 1rem, calc(var(--f-label-size-max, 1.6) - var(--f-label-size-min, 1.4) / 84 * 100vw + var(--f-label-size-min, 1.4) - var(--f-label-size-max, 1.6) - var(--f-label-size-min, 1.4) / 84 * 36 * 1rem), var(--f-label-size-max, 1.6) * 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, 1.4) * 1rem + (var(--f-label-size-max, 1.6) - var(--f-label-size-min, 1.4) * ((100vw - 36rem) / 84))); font-size: clamp(var(--f-label-size-min, 1.4) * 1rem, calc(var(--f-label-size-max, 1.6) - var(--f-label-size-min, 1.4) / 84 * 100vw + var(--f-label-size-min, 1.4) - var(--f-label-size-max, 1.6) - var(--f-label-size-min, 1.4) / 84 * 36 * 1rem), var(--f-label-size-max, 1.6) * 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(--secondary-hover)); color: var(--f-light-btn-text-color-hover, var(--primary-ultra-light)); border-color: var(--f-light-btn-border-color-hover, var(--secondary-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, 204 100% 19%) / 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); } .acss-auto-radius img, .acss-auto-radius 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--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); } .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)); } @font-face { font-family: "Krub"; font-weight: 200; font-display: swap; src: url(wp-content/uploads/2025/01/krub-v9-latin-200.woff) format("woff"); } @font-face { font-family: "Krub"; font-weight: 300; font-display: swap; src: url(wp-content/uploads/2025/01/krub-v9-latin-300.woff) format("woff"); } @font-face { font-family: "Krub"; font-weight: 400; font-display: swap; src: url(wp-content/uploads/2025/01/krub-v9-latin-regular.woff) format("woff"); } @font-face { font-family: "Krub"; font-weight: 500; font-display: swap; src: url(wp-content/uploads/2025/01/krub-v9-latin-500.woff) format("woff"); } @font-face { font-family: "Krub"; font-weight: 600; font-display: swap; src: url(wp-content/uploads/2025/01/krub-v9-latin-600.woff) format("woff"); } @font-face { font-family: "Krub"; font-weight: 700; font-display: swap; src: url(wp-content/uploads/2025/01/krub-v9-latin-700.woff) format("woff"); } @font-face { font-family: "Krub"; font-weight: 200; font-style: italic; font-display: swap; src: url(wp-content/uploads/2025/01/krub-v9-latin-200italic.woff) format("woff"); } @font-face { font-family: "Krub"; font-weight: 300; font-style: italic; font-display: swap; src: url(wp-content/uploads/2025/01/krub-v9-latin-300italic.woff) format("woff"); } @font-face { font-family: "Krub"; font-weight: 400; font-style: italic; font-display: swap; src: url(wp-content/uploads/2025/01/krub-v9-latin-italic.woff) format("woff"); } @font-face { font-family: "Krub"; font-weight: 500; font-style: italic; font-display: swap; src: url(wp-content/uploads/2025/01/krub-v9-latin-500italic.woff) format("woff"); } @font-face { font-family: "Krub"; font-weight: 600; font-style: italic; font-display: swap; src: url(wp-content/uploads/2025/01/krub-v9-latin-600italic.woff) format("woff"); } @font-face { font-family: "Krub"; font-weight: 700; font-style: italic; font-display: swap; src: url(wp-content/uploads/2025/01/krub-v9-latin-700italic.woff) format("woff"); } @font-face { font-family: "Inter"; font-weight: 100; font-display: swap; src: url(wp-content/uploads/2025/01/inter-v18-latin-100.woff) format("woff"); } @font-face { font-family: "Inter"; font-weight: 200; font-display: swap; src: url(wp-content/uploads/2025/01/inter-v18-latin-200.woff) format("woff"); } @font-face { font-family: "Inter"; font-weight: 300; font-display: swap; src: url(wp-content/uploads/2025/01/inter-v18-latin-300.woff) format("woff"); } @font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(wp-content/uploads/2025/01/inter-v18-latin-regular.woff) format("woff"); } @font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(wp-content/uploads/2025/01/inter-v18-latin-500.woff) format("woff"); } @font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(wp-content/uploads/2025/01/inter-v18-latin-600.woff) format("woff"); } @font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(wp-content/uploads/2025/01/inter-v18-latin-700.woff) format("woff"); } @font-face { font-family: "Inter"; font-weight: 800; font-display: swap; src: url(wp-content/uploads/2025/01/inter-v18-latin-800.woff) format("woff"); } @font-face { font-family: "Inter"; font-weight: 900; font-display: swap; src: url(wp-content/uploads/2025/01/inter-v18-latin-900.woff) format("woff"); } @font-face { font-family: "Inter"; font-weight: 100; font-style: italic; font-display: swap; src: url(wp-content/uploads/2025/01/inter-v18-latin-100italic.woff) format("woff"); } @font-face { font-family: "Inter"; font-weight: 200; font-style: italic; font-display: swap; src: url(wp-content/uploads/2025/01/inter-v18-latin-200italic.woff) format("woff"); } @font-face { font-family: "Inter"; font-weight: 300; font-style: italic; font-display: swap; src: url(wp-content/uploads/2025/01/inter-v18-latin-300italic.woff) format("woff"); } @font-face { font-family: "Inter"; font-weight: 400; font-style: italic; font-display: swap; src: url(wp-content/uploads/2025/01/inter-v18-latin-italic.woff) format("woff"); } @font-face { font-family: "Inter"; font-weight: 500; font-style: italic; font-display: swap; src: url(wp-content/uploads/2025/01/inter-v18-latin-500italic.woff) format("woff"); } @font-face { font-family: "Inter"; font-weight: 600; font-style: italic; font-display: swap; src: url(wp-content/uploads/2025/01/inter-v18-latin-600italic.woff) format("woff"); } @font-face { font-family: "Inter"; font-weight: 700; font-style: italic; font-display: swap; src: url(wp-content/uploads/2025/01/inter-v18-latin-700italic.woff) format("woff"); } @font-face { font-family: "Inter"; font-weight: 800; font-style: italic; font-display: swap; src: url(wp-content/uploads/2025/01/inter-v18-latin-800italic.woff) format("woff"); } @font-face { font-family: "Inter"; font-weight: 900; font-style: italic; font-display: swap; src: url(wp-content/uploads/2025/01/inter-v18-latin-900italic.woff) format("woff"); } .wp-block-button__link.wp-element-button { background: var(--btn-background); color: var(--btn-text-color); padding-block: var(--btn-padding-block); padding-inline: var(--btn-padding-inline); min-inline-size: var(--btn-min-width); line-height: var(--btn-line-height); font-size: var(--btn-font-size, var(--text-m)); font-weight: var(--btn-font-weight); font-style: var(--btn-font-style); text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing); text-decoration: var(--btn-text-decoration); border-width: var(--btn-border-width); border-style: var(--btn-border-style); border-radius: var(--btn-radius); border-color: var(--btn-border-color); transition: var(--btn-transition, var(--transition)); justify-content: var(--btn-justify-content, center); text-align: var(--btn-text-align, center); --btn-background: var(--secondary); --btn-background-hover: var(--secondary-hover); --btn-text-color: var(--secondary-ultra-light); --btn-text-color-hover: var(--secondary-ultra-light); --btn-border-color: var(--secondary); --btn-border-color-hover: var(--secondary-hover); --focus-color: var(--secondary-light); --btn-font-size: var(--text-m); } @media (hover: hover) and (pointer: fine) { .wp-block-button__link.wp-element-button:hover { background: var(--btn-background-hover); color: var(--btn-text-color-hover); border-color: var(--btn-border-color-hover); text-decoration: var(--btn-text-decoration-hover); } } .wp-block-button__link.wp-element-button:focus { outline-style: solid; outline-color: var(--focus-color); outline-width: var(--focus-width); outline-offset: var(--focus-offset); } /* Primary (outline) button style */ .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button { background: var(--btn-background); color: var(--btn-text-color); padding-block: var(--btn-padding-block); padding-inline: var(--btn-padding-inline); min-inline-size: var(--btn-min-width); line-height: var(--btn-line-height); font-size: var(--btn-font-size, var(--text-m)); font-weight: var(--btn-font-weight); font-style: var(--btn-font-style); text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing); text-decoration: var(--btn-text-decoration); border-width: var(--btn-border-width); border-style: var(--btn-border-style); border-radius: var(--btn-radius); border-color: var(--btn-border-color); transition: var(--btn-transition, var(--transition)); justify-content: var(--btn-justify-content, center); text-align: var(--btn-text-align, center); --btn-background: transparent; --btn-background-hover: var(--secondary-hover); --btn-text-color: var(--secondary); --btn-text-color-hover: var(--secondary-ultra-light); --btn-border-width: 2px; --btn-border-color: var(--secondary); --btn-border-color-hover: var(--secondary-hover); --focus-color: var(--secondary-light); --btn-font-size: var(--text-m); } @media (hover: hover) and (pointer: fine) { .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:hover { background: var(--btn-background-hover); color: var(--btn-text-color-hover); border-color: var(--btn-border-color-hover); text-decoration: var(--btn-text-decoration-hover); } } .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:focus { outline-style: solid; outline-color: var(--focus-color); outline-width: var(--focus-width); outline-offset: var(--focus-offset); } :root { --radius-img: clamp(calc(1rem * (16 / var(--base-font))), calc(1rem * ((((-1 * var(--min-viewport)) / var(--base-font)) * ((24 - 16) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font))) + (16 / var(--base-font)))) + (((24 - 16) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font)) * 100) * var(--clamp-unit), calc(1rem * (24 / var(--base-font)))); --min-viewport: 360; --max-viewport: 1600; --base-font: 10; --clamp-unit: 1vw; } .brxe-container { width: var(--content-width) } .woocommerce main.site-main { width: var(--content-width) } #brx-content.wordpress { width: var(--content-width) } body { font-family: "Krub" } h1, h2, h3, h4, h5, h6 { font-family: "Inter" } .fr-header-alpha { padding-top: var(--space-m); padding-bottom: var(--space-m) } .fr-header-alpha__inner { display: flex; align-items: center; justify-content: space-between; flex-direction: row } @media (max-width: 767px) { .fr-header-alpha__inner { flex-wrap: nowrap } } .menu-linea-sub-animada .brx-nav-nested-items > li > a { position: relative; } .menu-linea-sub-animada .brx-nav-nested-items > li > a:before { background-color: var(--primary); content: ''; width: 0; height: 5px; position: absolute; bottom: 0; left: 0; right: 0; margin: -20px auto; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: width .2s ease; transition: width .5s ease; } .menu-linea-sub-animada .brx-nav-nested-items > li > a:hover:before { width: 100%; opacity: 1; } .menu-linea-sub-animada .brx-nav-nested-items > li > [aria-current="page"]:before { opacity: 1; width: 100%; } .menu-linea-sub-animada .brx-nav-nested-items { transition: all .5s ease-in-out; } .dropdown .brx-submenu-toggle button[aria-expanded="true"] { transform: rotateZ(180deg) } .dropdown .brx-submenu-toggle { gap: 2px } .dropdown .brx-submenu-toggle button { font-size: var(--text-s) } .dropdown .brx-dropdown-content > li [aria-current="page"] { color: var(--secondary) } .dropdown .brx-dropdown-content > li .aria-current { color: var(--secondary) } .dropdown.brx-has-megamenu .brx-dropdown-content [aria-current="page"] { color: var(--secondary) } .dropdown .brx-dropdown-content { background-color: var(--neutral-semi-light) } .dropdown .brx-dropdown-content > li > a { padding-left: 5px } .dropdown .brx-dropdown-content .brx-submenu-toggle > * { padding-left: 5px } .dropdown.brx-has-megamenu .brx-dropdown-content > * { padding-left: 5px } @media (max-width: 991px) { .dropdown .brx-dropdown-content { background-color: var(--primary-ultra-dark) } } .dropdown__content { row-gap: calc(var(--space-xs) / 2); padding-top: var(--btn-padding-block); padding-right: var(--btn-padding-inline); padding-bottom: var(--btn-padding-block); padding-left: var(--btn-padding-inline) } @media (max-width: 767px) { .dropdown__content { margin-top: var(--space-xs); margin-right: 0; margin-left: 0 } } .text-basic-titulo-submenu-header { text-transform: uppercase; color: var(--white); font-weight: 600; margin-top: calc(var(--space-xs) / 2) } .header-11__search button { font-size: var(--text-s); color: var(--white); height: auto; width: auto } .header-11__search-desktop button { font-size: var(--white) } @media (max-width: 991px) { .header-11__search-desktop { display: none } } .block-titulo-interior__post-title { color: var(--white); text-align: left } @media (max-width: 478px) { .block-titulo-interior__post-title { font-size: var(--text-xl) } } .titulo-seccion { color: var(--neutral-semi-light); text-align: center; align-self: center } .bloque-empresa { row-gap: var(--space-xs) } .bloque-empresa__div-contenedor-image { height: 100px; display: flex; align-items: flex-end } .bloque-empresa__image { max-width: 150px } .bloque-empresa__text { font-size: var(--text-s); color: var(--neutral-semi-dark); font-weight: 400 } .bloque-empresa__text a { font-size: var(--text-s); color: var(--neutral-semi-dark); font-weight: 400; font-size: inherit } .bloque-empresa__saber-mas { font-size: var(--text-s); text-transform: uppercase; text-align: left; font-weight: 600; color: var(--secondary); flex-direction: row-reverse } .bloque-empresa__saber-mas .icon > i { font-size: var(--text-xs) } .bloque-empresa__saber-mas .icon > svg { width: var(--text-xs); height: var(--text-xs) } .bloque-empresa__saber-mas .icon { color: var(--secondary); fill: var(--secondary) } .grecaptcha-badge { visibility: revert !important; } table { width: 100%; text-align: center; border-spacing: 2px; border-collapse: separate; margin-bottom: 20px; } table tr td { padding: 15px 10px; } table tr:nth-child(2n) { color: #000000; } table tr:nth-child(2n) { background-color: #f8f8f8; } table tr:nth-child(2n+1) { color: #000000; } table tr:nth-child(2n+1) { background-color: #f9f9f9; } table tr th { color: #ffffff; } table tr th { background-color: #003a62; } table tr th { padding: 13px 10px; font-size: 16px; font-weight: normal; } p, ol, ul { font-size: var(--normal-font-size); margin-bottom: 16px; line-height: 28px; text-align: start; } table p { margin-bottom: 20px; line-height: 1.7em; } table ul, table ol { margin-left: 35px; margin-bottom: 20px; } .wp-block-columns { gap: 3rem; padding-top: 2rem; padding-bottom: 2rem; } ul.wp-block-list, ol.wp-block-list { padding-top: 1.5rem; padding-bottom: 1.5rem; } .wp-block-heading { padding-bottom: 2rem; } .wp-block-column p { margin-bottom: 2rem; } :root { --bricks-color-acss_import_transparent: transparent; } #brxe-fdvsbs { display: none } @media (max-width: 991px) { #brxe-fdvsbs { display: block } } #brxe-nwkcoc { row-gap: 12px } #brxe-eqhljn { row-gap: 12px } #brxe-lxumbd { row-gap: 12px } #brxe-zsvsnq { row-gap: 12px } #brxe-xjphzj { row-gap: 12px } #brxe-bvsofp .bricks-search-overlay:after { background-color: var(--neutral-light) } #brxe-bvsofp button { color: var(--neutral-semi-light) } #brxe-xudjoy .brxa-wrap { color: var(--primary) } @media (max-width: 991px) { #brxe-xudjoy { position: absolute; top: 20px; right: 20px } } #brxe-sflywj { text-transform: uppercase; color: var(--neutral-semi-light); font-size: var(--text-s); flex-wrap: nowrap } #brxe-sflywj li:hover { color: var(--primary); } #brxe-sflywj li ul li:hover { color: var(--secondary); } #brxe-edjyga .brxa-wrap { color: var(--primary) } @media (max-width: 991px) { #brxe-fxlfin .brx-toggle-div { display: inline-flex; } #brxe-fxlfin .brxe-toggle { display: inline-flex; } [data-script-id="fxlfin"] .brx-nav-nested-items { opacity: 0; visibility: hidden; gap: 0; position: fixed; z-index: 1001; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #fff; overflow-y: scroll; flex-wrap: nowrap; } #brxe-fxlfin.brx-open .brx-nav-nested-items { opacity: 1; visibility: visible; } } #brxe-fxlfin .brx-nav-nested-items { gap: var(--space-s) } #brxe-fxlfin .brx-nav-nested-items > li > [aria-current="page"] { color: var(--primary) } #brxe-fxlfin .brx-nav-nested-items > li > .brx-submenu-toggle.aria-current > * { color: var(--primary) } #brxe-fxlfin .brx-dropdown-content { color: var(--white); font-size: var(--text-xs); text-transform: none; background-color: var(--primary-ultra-dark) } @media (max-width: 991px) { #brxe-fxlfin.brx-open .brx-nav-nested-items { background-color: var(--neutral-ultra-light); align-items: center; justify-content: center; height: 100vh } } @media (max-width: 767px) { #brxe-fxlfin .brx-nav-nested-items { gap: var(--space-m) } } #brxe-tmhttc { color: var(--white); text-align: left; align-self: flex-start } #brxe-ixxgjq { color: var(--white) } #brxe-ixxgjq a { color: var(--white); font-size: inherit } #brxe-euimot { align-items: flex-start; width: 50% } @media (max-width: 767px) { #brxe-euimot { width: 100% } } #brxe-himjvm { align-items: flex-start } #brxe-tjhiii:not(.tag), #brxe-tjhiii img { object-fit: cover } #brxe-tjhiii { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: -1 } #brxe-gbmuni { position: relative } #brxe-iwjhvo { color: var(--primary); text-transform: uppercase } #brxe-elxghs { background-image: url(recurso2.png); background-repeat: no-repeat; background-position: 100% 20%; background-size: auto; padding-top: var(--section-space-xs); padding-bottom: var(--section-space-xs) } #brxe-sxgcjf { --min: 200px; } #brxe-wkrhev { text-transform: uppercase; color: var(--neutral-semi-light); font-weight: 600 } #brxe-fmdxfe { text-transform: capitalize; color: var(--neutral-semi-light); font-weight: 400 } #brxe-nahmvp { text-transform: capitalize; color: var(--neutral-semi-light); font-weight: 400 } #brxe-qdrdjd { flex-direction: column; align-items: flex-start; color: var(--white); font-size: var(--text-s) } #brxe-qdrdjd li:hover { color: var(--secondary); } #brxe-lzswhc .brx-nav-nested-items { gap: var(--space-xs) } #brxe-lzswhc .brx-nav-nested-items > li > [aria-current="page"] { color: var(--secondary) } #brxe-lzswhc .brx-nav-nested-items > li > .brx-submenu-toggle.aria-current > * { color: var(--secondary) } #brxe-ciyjev { text-transform: uppercase; color: var(--neutral-semi-light); font-weight: 600 } #brxe-giaieh { flex-direction: column; align-items: flex-start; color: var(--white); font-size: var(--text-s) } #brxe-giaieh a:hover { color: var(--secondary); } #brxe-ferpgi .brx-nav-nested-items { gap: var(--space-xs) } #brxe-ferpgi .brx-nav-nested-items > li > [aria-current="page"] { color: var(--secondary) } #brxe-ferpgi .brx-nav-nested-items > li > .brx-submenu-toggle.aria-current > * { color: var(--secondary) } #brxe-tulnio { text-transform: uppercase; color: var(--neutral-semi-light); font-weight: 600 } #brxe-vpafwk { flex-direction: column; align-items: flex-start; color: var(--white); font-size: var(--text-s) } #brxe-vpafwk a:hover { color: var(--secondary); } #brxe-jdjddo .brx-nav-nested-items { gap: var(--space-xs) } #brxe-jdjddo .brx-nav-nested-items > li > [aria-current="page"] { color: var(--secondary) } #brxe-jdjddo .brx-nav-nested-items > li > .brx-submenu-toggle.aria-current > * { color: var(--secondary) } #brxe-nkqmoi { justify-content: flex-start; row-gap: var(--space-xl) } #brxe-usxyzg { text-transform: uppercase; color: var(--neutral-semi-light); font-weight: 600 } #brxe-ebcznt { text-transform: capitalize; color: var(--neutral-semi-light); font-weight: 400 } #brxe-pyjkod { text-transform: capitalize; color: var(--neutral-semi-light); font-weight: 400 } #brxe-tkpsxr { text-transform: capitalize; color: var(--neutral-semi-light); font-weight: 400 } #brxe-ilufpz { flex-direction: column; align-items: flex-start; color: var(--white); font-size: var(--text-s) } #brxe-ilufpz a:hover { color: var(--secondary); } #brxe-bmqbrx .brx-nav-nested-items { gap: var(--space-xs) } #brxe-bmqbrx .brx-nav-nested-items > li > [aria-current="page"] { color: var(--secondary) } #brxe-bmqbrx .brx-nav-nested-items > li > .brx-submenu-toggle.aria-current > * { color: var(--secondary) } #brxe-moezpl { text-transform: uppercase; color: var(--neutral-semi-light); font-weight: 600 } #brxe-wtgnmx { flex-direction: column; align-items: flex-start; color: var(--white); font-size: var(--text-s) } #brxe-wtgnmx a:hover { color: var(--secondary); } #brxe-omfvsc .brx-nav-nested-items { gap: var(--space-xs) } #brxe-omfvsc .brx-nav-nested-items > li > [aria-current="page"] { color: var(--secondary) } #brxe-omfvsc .brx-nav-nested-items > li > .brx-submenu-toggle.aria-current > * { color: var(--secondary) } #brxe-nceqql li.has-link a, #brxe-nceqql li.no-link { color: #ffffff; font-size: 110px; gap: 0px; padding-top: 20px } #brxe-nceqql { gap: var(--space-l) } #brxe-nceqql .icon { font-size: 0.4em } #brxe-nceqql svg { height: 0.4em; width: auto } #brxe-ziforw { align-items: flex-end } @media (max-width: 478px) { #brxe-ziforw { align-items: flex-start } } #brxe-clftiy { display: grid; align-items: initial; grid-template-columns: var(--grid-4); padding-top: var(--space-xs); padding-bottom: var(--space-xs); flex-direction: row; color: var(--white); grid-gap: calc(var(--content-gap) * 2); z-index: 1 } @media (max-width: 767px) { #brxe-clftiy { grid-template-columns: var(--grid-2) } } @media (max-width: 478px) { #brxe-clftiy { grid-gap: var(--space-l); grid-template-columns: var(--grid-1) } } #brxe-gtuxni { position: absolute; bottom: 0px; left: 0px; z-index: 0 } #brxe-xnddpu { background-color: var(--primary); padding-top: var(--section-space-xs); padding-bottom: var(--section-space-xs); position: relative } #brxe-xajbau { color: var(--white); font-size: var(--text-s) } #brxe-xajbau a { color: var(--white); font-size: var(--text-s); font-size: inherit } #brxe-chjegu { align-items: center } #brxe-cqqern { background-color: var(--black); padding-top: calc(var(--section-space-xs) / 2); padding-bottom: calc(var(--section-space-xs) / 2) } #brxe-yoamca { margin-bottom: -1px } #brxe-ylkkkx { font-size: var(--text-s) } #brxe-ylkkkx a { font-size: var(--text-s); font-size: inherit } #brxe-knerij { padding-top: var(--space-xl); padding-bottom: var(--space-xl); row-gap: var(--gap-s); flex-direction: column; align-items: center } #brxe-glwepo { padding-bottom: var(--gap-m) } #brxe-fiizsb { font-size: 3em; cursor: pointer; transition: all 0.5s; color: var(--neutral); fill: var(--neutral); margin-right: -50px } #brxe-fiizsb:hover { color: var(--primary); fill: var(--primary) } @media (max-width: 991px) { #brxe-fiizsb { font-size: 2.2rem } } @media (max-width: 478px) { #brxe-fiizsb { margin-right: 0 } } #brxe-vhpwpk { background-color: transparent; width: 100%; display: flex; flex-direction: row; justify-content: flex-end } body.bricks-is-frontend #brxe-vhpwpk:focus-visible { outline: unset; } #brxe-hjtlch { padding-top: 0; padding-right: 50px; padding-bottom: 0; padding-left: 50px; position: relative; row-gap: var(--space-s) } #brx-header.sticky { transition: background-color 0.2s, transform 1s } #brx-header.sticky > .brxe-section, #brx-header.sticky > .brxe-container, #brx-header.sticky > .brxe-block, #brx-header.sticky > .brxe-div { transition: background-color 0.2s, transform 1s } #brx-header.sticky .brxe-logo { transition: background-color 0.2s, transform 1s } #brx-header.sticky .bricks-nav-menu > li > a { transition: background-color 0.2s, transform 1s } #brx-header.sticky .bricks-nav-menu > li > .brx-submenu-toggle > a { transition: background-color 0.2s, transform 1s } #brx-header.sticky .bricks-nav-menu > li > .brx-submenu-toggle > button > * { transition: background-color 0.2s, transform 1s } #brx-header.sticky .brx-nav-nested-items > li > a { transition: background-color 0.2s, transform 1s } #brx-header.sticky .brx-nav-nested-items > li > .brx-submenu-toggle { transition: background-color 0.2s, transform 1s } #brx-header.sticky .brx-nav-nested-items > li > .brx-submenu-toggle > * { transition: background-color 0.2s, transform 1s } #brx-header.sticky .brxe-nav-nested > .brxe-toggle .brxa-inner { transition: background-color 0.2s, transform 1s } #brx-header.sticky .brxe-search { transition: background-color 0.2s, transform 1s } #brx-header.sticky .brxe-search button { transition: background-color 0.2s, transform 1s } #brx-header.sticky.scrolling > .brxe-section, #brx-header.sticky.scrolling > .brxe-container, #brx-header.sticky.scrolling > .brxe-block, #brx-header.sticky.scrolling > .brxe-div { background-color: var(--white) } #brx-header.sticky.scrolling:not(.slide-up) > .brxe-section, #brx-header.sticky.scrolling:not(.slide-up) > .brxe-container, #brx-header.sticky.scrolling:not(.slide-up) > .brxe-block, #brx-header.sticky.scrolling:not(.slide-up) > .brxe-div { box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.25) } .cmplz-hidden { display: none !important; } .recentcomments a { display: inline !important; padding: 0 !important; margin: 0 !important; }