@charset "UTF-8"; /* purgecss start ignore */ /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *, path, clipPath)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } input::-webkit-search-cancel-button { display: none; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* purgecss end ignore */ @font-face { font-family: "Geomanist"; src: url("../fonts/geomanist/Geomanist-LightItalic.woff2") format("woff2"), url("../fonts/geomanist/Geomanist-LightItalic.woff") format("woff"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Geomanist"; src: url("../fonts/geomanist/Geomanist-Light.woff2") format("woff2"), url("../fonts/geomanist/Geomanist-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Geomanist"; src: url("../fonts/geomanist/Geomanist.woff2") format("woff2"), url("../fonts/geomanist/Geomanist.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Geomanist"; src: url("../fonts/geomanist/Geomanist-Italic.woff2") format("woff2"), url("../fonts/geomanist/Geomanist-Italic.woff") format("woff"); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: "Geomanist"; src: url("../fonts/geomanist/Geomanist-Book.woff2") format("woff2"), url("../fonts/geomanist/Geomanist-Book.woff") format("woff"); font-weight: 450; font-style: normal; font-display: swap; } @font-face { font-family: "Geomanist"; src: url("../fonts/geomanist/Geomanist-BookItalic.woff2") format("woff2"), url("../fonts/geomanist/Geomanist-BookItalic.woff") format("woff"); font-weight: 450; font-style: italic; font-display: swap; } @font-face { font-family: "Geomanist"; src: url("../fonts/geomanist/Geomanist-Medium.woff2") format("woff2"), url("../fonts/geomanist/Geomanist-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Geomanist"; src: url("../fonts/geomanist/Geomanist-MediumItalic.woff2") format("woff2"), url("../fonts/geomanist/Geomanist-MediumItalic.woff") format("woff"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "remixicon"; src: url("../fonts/remixicon/remixicon.eot?t=1749041919601"); /* IE9*/ src: url("../fonts/remixicon/remixicon.eot?t=1749041919601#iefix") format("embedded-opentype"), url("../fonts/remixicon/remixicon.woff2?t=1749041919601") format("woff2"), url("../fonts/remixicon/remixicon.woff?t=1749041919601") format("woff"), url("../fonts/remixicon/remixicon.ttf?t=1749041919601") format("truetype"), url("../fonts/remixicon/remixicon.svg?t=1749041919601#remixicon") format("svg"); /* iOS 4.1- */ font-display: swap; } :root { --grid-columns: 12; --grid-gap: 1.6rem; --grid-gap-block: 1.6rem; --grid-edge: 1.6rem; --header-height: 12rem; --breadcrumb-height: 3.2rem; --layout-max-width: 172rem; --container-columns: 12; --column-size: 12; --minus-gap: 1; --cta-height: 4.8rem; --radius--default: 3rem; --ratio--square: 1/1; --ratio--2x1: 2/1; --ratio--3x2: 3/2; --ratio--5x3: 5/3; --ratio--7x3: 7/3; --ratio--16x9: 16/9; --ratio--21x9: 21/9; --shadow--default: 0 0 2rem hsl(from var(--black, black) h s l/15%); --white: hsl(0, 0%, 100%); --black: hsl(0, 0%, 0%); --yellow-300: hsl(50, 100%, 70%); --yellow-500: hsl(48, 100%, 50%); --yellow-700: hsl(42, 100%, 45%); --yellow-800: hsl(40, 50%, 28%); --blue-100: hsl(220, 100%, 85%); --blue-200: hsl(220, 92%, 75%); --blue-800: hsl(220, 97%, 23%); --blue-900: hsl(231, 68%, 21%); --grey-100: hsl(0, 0%, 96%); --grey-150: hsl(0, 0%, 88%); --grey-400: hsl(0, 0%, 65%); --grey-600: hsl(0, 0%, 54%); --grey-800: hsl(0, 0%, 19%); --red-600: hsl(0, 71%, 59%); --red-700: hsl(0, 71%, 45%); --orange-600: hsl(33, 74%, 58%); --green-600: hsl(107, 29%, 55%); --green-800: hsl(107, 50%, 35%); --root-font-size: 16; --scale-font-size: 10; --font-size: 1.6rem; --line-height: 1.5em; --title-font: Geomanist, sans-serif; --text-font: Geomanist, sans-serif; --text-color: var(--grey-800); --text-color--default: var(--grey-800); --text-color--bright: var(--white); --text-color--light: var(--grey-600); --text-color--lighter: var(--grey-400); --text-color--accent: var(--blue-800); --text-color--accent-alt: var(--yellow-500); --text-color--accent-light: var(--blue-200); --title-color: var(--blue-800); --title-color--default: var(--blue-800); --title-color--bright: var(--white); --title-color--accent: var(--yellow-700); --stroke-color: var(--grey-150); --stroke-color--default: var(--grey-150); --stroke-color--medium: var(--grey-600); --stroke-color--accent: var(--blue-800); --stroke-color--accent-light: var(--blue-100); --background-color: var(--white); --background-color--bright: var(--white); --background-color--light: var(--grey-100); --background-color--dark: var(--blue-800); --background-color--darker: var(--blue-900); --background-color--accent: var(--yellow-500); --icon-color: var(--text-color); --alert: var(--red-600); --warning: var(--orange-600); --success: var(--green-600); --row-background: var(--background-color); --row-margin-block: 3.5em; --block-padding-block: 2.5em; --block-margin-block: 3.5em; --content-padding-block: 2em; --transition-property: all; --transition-easing: linear(0, 0.002, 0.01 3.6%, 0.034, 0.074 9.1%, 0.128 11.4%, 0.194 13.4%, 0.271 15%, 0.344 16.1%, 0.544, 0.66 20.6%, 0.717 22.4%, 0.765 24.6%, 0.808 27.3%, 0.845 30.4%, 0.883 35.1%, 0.916 40.6%, 0.942 47.2%, 0.963 55%, 0.979 64%, 0.991 74.4%, 0.998 86.4%, 1); --transition-duration: 0.65s; --transition: var(--transition-property) var(--transition-easing) var(--transition-duration) var(--transition-delay, 0s); } @media screen and ( min-width: 26.75em ) { :root { --grid-edge: 3.2rem; } } @media screen and ( min-width: 40em ) { :root { --header-height: 14.4rem; --grid-edge: 4rem; --grid-gap: 2.4rem; } } @media screen and ( min-width: 48em ) { :root { --grid-gap: 2.4rem; --row-margin-block: 5em; --block-margin-block: 5em; } } @media screen and ( min-width: 64em ) { :root { --grid-edge: 6rem; } } @media screen and ( min-width: 80em ) { :root { --grid-gap: 3.2rem; --row-margin-block: 6em; --block-margin-block: 6em; } } @media screen and ( min-width: 85.375em ) { :root { --grid-gap: 4rem; } } :root { --z-index-breadcrumb: 50; --z-index-header-curtain: 100; --z-index-header: 150; --z-index-header-nav: 200; --z-index-header-actions: 250; --z-index-header-logo: 300; --z-index-header-search: 350; --z-index-dialog: 400; } html, body { font-family: var(--text-font); font-size: calc(var(--scale-font-size, var(--root-font-size, 16)) / var(--root-font-size, 16) * 100%); font-optical-sizing: auto; font-weight: 400; text-wrap: pretty; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .page__wrapper, .dialog { font-size: var(--font-size); line-height: var(--line-height); } :where(*:not(.icon)) { color: var(--text-color); } em { font-style: italic; } strong { font-weight: 500; } abbr { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.1rem; text-decoration-style: dotted; } html, body { background: var(--background-color); color: var(--text-color); } ::-moz-selection { color: var(--selection-color, var(--blue-800)); background: var(--selection-background, hsl(from var(--blue-200) h s l/25%)); } ::selection { color: var(--selection-color, var(--blue-800)); background: var(--selection-background, hsl(from var(--blue-200) h s l/25%)); } code::-moz-selection { color: currentColor; background: rgba(255, 255, 255, 0.15); } code::selection { color: currentColor; background: rgba(255, 255, 255, 0.15); } .title--gradient :is(span, a, .icon)::-moz-selection { -webkit-text-fill-color: var(--text-color--accent-darker); } .title--gradient :is(span, a, .icon)::selection { -webkit-text-fill-color: var(--text-color--accent-darker); } .footer__colophon, .header__menu { --text-color: var(--text-color--bright); --icon-color: var(--text-color); --selection-background: var(--blue-100); } .flex { display: flex; flex-wrap: wrap; align-content: flex-start; } .flex--row, .flex--grid { gap: var(--grid-gap-block) var(--grid-gap); } .flex--row > :where(*:not([class*=col-])), .flex--grid > :where(*:not([class*=col-])) { flex: 0 0 100%; } .flex--grid { gap: var(--grid-gap); } .flex--grid > :where(* + *) { margin-block-start: 0; } .flex > [class*=col-] { flex: var(--width, 0 0 calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - var(--minus-gap)) + var(--grid-offset, 0%))); min-width: var(--min-width, calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - var(--minus-gap)) + var(--grid-offset, 0%))); } .flex--column { flex-direction: column; } .flex--column.flex--v-center { align-items: center; } .flex .col-auto { --width: 0 0 auto; --min-width: auto; } .flex .col-grow { --width: 1 0 auto; --min-width: auto; } .flex .col-flow { --width: 1 1 0%; --min-width: auto; } .flex--auto > :where(*:not([class*=col-])) { flex: 0 0 auto; max-width: 100%; } .flex--grow > :where(*:not([class*=col-])) { flex: 1; } .flex--flow > :where(*:not([class*=col-])) { flex: 1; } .flex--column { flex-wrap: nowrap; flex-direction: column; } .flex--justify { justify-content: center; } .flex--v-spaced { align-content: space-between; } .flex--baseline { align-items: baseline; } .flex--v-start { align-items: flex-start; } .flex--v-end { align-items: flex-end; } .flex--v-stretch { align-items: stretch; } .flex--h-spaced { justify-content: space-between; } .flex--v-center { align-items: center; align-content: center; } .flex--h-center { justify-content: center; } .flex--h-end { justify-content: flex-end; } .flex--nowrap { flex-wrap: nowrap; } .grid { display: grid; gap: 0 var(--grid-gap); grid-template-columns: repeat(var(--container-columns, var(--grid-columns)), 1fr); grid-auto-flow: column; } .grid > [class*=col-] { grid-column-end: span clamp(1, var(--column-size), var(--container-columns)); } .grid > :where(*:not([class*=col-])) { grid-column: 1/-1; } .grid--row { grid-auto-flow: row; } .grid--v-start { align-items: start; } *:not(.flex, .grid) > [class*=col-] { width: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - var(--minus-gap)) + var(--grid-offset, 0%)); } [class*=ml-] { margin-inline-start: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--offset-left-size) + var(--grid-gap) * (var(--offset-left-size) - 0) + var(--grid-offset, 0%)); } [class*=mr-] { margin-inline-end: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--offset-right-size) + var(--grid-gap) * (var(--offset-right-size) - 0) + var(--grid-offset, 0%)); } .col-demi { --column-size: calc(var(--container-columns) * 0.5); } .col-third { --column-size: calc(var(--container-columns) / 3); } .col-full { --column-size: var(--container-columns); } .col-1 { --column-size: 1; } .col-1 > *, .col-1::before, .col-1::after { --container-columns: 1; } .col-1.grid { --grid-columns: 1; } .start-1 { grid-column-start: 1; } .col-2 { --column-size: 2; } .col-2 > *, .col-2::before, .col-2::after { --container-columns: 2; } .col-2.grid { --grid-columns: 2; } .start-2 { grid-column-start: 2; } .col-3 { --column-size: 3; } .col-3 > *, .col-3::before, .col-3::after { --container-columns: 3; } .col-3.grid { --grid-columns: 3; } .start-3 { grid-column-start: 3; } .col-4 { --column-size: 4; } .col-4 > *, .col-4::before, .col-4::after { --container-columns: 4; } .col-4.grid { --grid-columns: 4; } .start-4 { grid-column-start: 4; } .col-5 { --column-size: 5; } .col-5 > *, .col-5::before, .col-5::after { --container-columns: 5; } .col-5.grid { --grid-columns: 5; } .start-5 { grid-column-start: 5; } .col-6 { --column-size: 6; } .col-6 > *, .col-6::before, .col-6::after { --container-columns: 6; } .col-6.grid { --grid-columns: 6; } .start-6 { grid-column-start: 6; } .col-7 { --column-size: 7; } .col-7 > *, .col-7::before, .col-7::after { --container-columns: 7; } .col-7.grid { --grid-columns: 7; } .start-7 { grid-column-start: 7; } .col-8 { --column-size: 8; } .col-8 > *, .col-8::before, .col-8::after { --container-columns: 8; } .col-8.grid { --grid-columns: 8; } .start-8 { grid-column-start: 8; } .col-9 { --column-size: 9; } .col-9 > *, .col-9::before, .col-9::after { --container-columns: 9; } .col-9.grid { --grid-columns: 9; } .start-9 { grid-column-start: 9; } .col-10 { --column-size: 10; } .col-10 > *, .col-10::before, .col-10::after { --container-columns: 10; } .col-10.grid { --grid-columns: 10; } .start-10 { grid-column-start: 10; } .col-11 { --column-size: 11; } .col-11 > *, .col-11::before, .col-11::after { --container-columns: 11; } .col-11.grid { --grid-columns: 11; } .start-11 { grid-column-start: 11; } .col-12 { --column-size: 12; } .col-12 > *, .col-12::before, .col-12::after { --container-columns: 12; } .col-12.grid { --grid-columns: 12; } .start-12 { grid-column-start: 12; } .ml-0 { --offset-left-size: 0; } .ml-0 * { --offset-left-size: 0; } .mr-0 { --offset-right-size: 0; } .mr-0 * { --offset-right-size: 0; } .ml-1 { --offset-left-size: 1; } .ml-1 * { --offset-left-size: 0; } .mr-1 { --offset-right-size: 1; } .mr-1 * { --offset-right-size: 0; } .ml-2 { --offset-left-size: 2; } .ml-2 * { --offset-left-size: 0; } .mr-2 { --offset-right-size: 2; } .mr-2 * { --offset-right-size: 0; } .ml-3 { --offset-left-size: 3; } .ml-3 * { --offset-left-size: 0; } .mr-3 { --offset-right-size: 3; } .mr-3 * { --offset-right-size: 0; } .ml-4 { --offset-left-size: 4; } .ml-4 * { --offset-left-size: 0; } .mr-4 { --offset-right-size: 4; } .mr-4 * { --offset-right-size: 0; } .ml-5 { --offset-left-size: 5; } .ml-5 * { --offset-left-size: 0; } .mr-5 { --offset-right-size: 5; } .mr-5 * { --offset-right-size: 0; } .ml-6 { --offset-left-size: 6; } .ml-6 * { --offset-left-size: 0; } .mr-6 { --offset-right-size: 6; } .mr-6 * { --offset-right-size: 0; } .ml-7 { --offset-left-size: 7; } .ml-7 * { --offset-left-size: 0; } .mr-7 { --offset-right-size: 7; } .mr-7 * { --offset-right-size: 0; } .ml-8 { --offset-left-size: 8; } .ml-8 * { --offset-left-size: 0; } .mr-8 { --offset-right-size: 8; } .mr-8 * { --offset-right-size: 0; } .ml-9 { --offset-left-size: 9; } .ml-9 * { --offset-left-size: 0; } .mr-9 { --offset-right-size: 9; } .mr-9 * { --offset-right-size: 0; } .ml-10 { --offset-left-size: 10; } .ml-10 * { --offset-left-size: 0; } .mr-10 { --offset-right-size: 10; } .mr-10 * { --offset-right-size: 0; } .ml-11 { --offset-left-size: 11; } .ml-11 * { --offset-left-size: 0; } .mr-11 { --offset-right-size: 11; } .mr-11 * { --offset-right-size: 0; } .ml-12 { --offset-left-size: 12; } .ml-12 * { --offset-left-size: 0; } .mr-12 { --offset-right-size: 12; } .mr-12 * { --offset-right-size: 0; } @media screen and ( min-width: 22.5em ) { .col-auto--xxxs { --width: 0 0 auto; --min-width: auto; } .col-flow--xxxs { --width: 1 1 0%; --min-width: auto; } .col-demi--xxxs { --column-size: calc(var(--container-columns) * 0.5); } .col-third--key { --column-size: calc(var(--container-columns) / 3); } .col-full--xxxs { --column-size: var(--container-columns); } .col-1--xxxs { --column-size: 1; } .col-1--xxxs > *, .col-1--xxxs::before, .col-1--xxxs::after { --container-columns: 1; } .col-1--xxxs.grid { --grid-columns: 1; } .start-1--xxxs { grid-column-start: 1; } .col-2--xxxs { --column-size: 2; } .col-2--xxxs > *, .col-2--xxxs::before, .col-2--xxxs::after { --container-columns: 2; } .col-2--xxxs.grid { --grid-columns: 2; } .start-2--xxxs { grid-column-start: 2; } .col-3--xxxs { --column-size: 3; } .col-3--xxxs > *, .col-3--xxxs::before, .col-3--xxxs::after { --container-columns: 3; } .col-3--xxxs.grid { --grid-columns: 3; } .start-3--xxxs { grid-column-start: 3; } .col-4--xxxs { --column-size: 4; } .col-4--xxxs > *, .col-4--xxxs::before, .col-4--xxxs::after { --container-columns: 4; } .col-4--xxxs.grid { --grid-columns: 4; } .start-4--xxxs { grid-column-start: 4; } .col-5--xxxs { --column-size: 5; } .col-5--xxxs > *, .col-5--xxxs::before, .col-5--xxxs::after { --container-columns: 5; } .col-5--xxxs.grid { --grid-columns: 5; } .start-5--xxxs { grid-column-start: 5; } .col-6--xxxs { --column-size: 6; } .col-6--xxxs > *, .col-6--xxxs::before, .col-6--xxxs::after { --container-columns: 6; } .col-6--xxxs.grid { --grid-columns: 6; } .start-6--xxxs { grid-column-start: 6; } .col-7--xxxs { --column-size: 7; } .col-7--xxxs > *, .col-7--xxxs::before, .col-7--xxxs::after { --container-columns: 7; } .col-7--xxxs.grid { --grid-columns: 7; } .start-7--xxxs { grid-column-start: 7; } .col-8--xxxs { --column-size: 8; } .col-8--xxxs > *, .col-8--xxxs::before, .col-8--xxxs::after { --container-columns: 8; } .col-8--xxxs.grid { --grid-columns: 8; } .start-8--xxxs { grid-column-start: 8; } .col-9--xxxs { --column-size: 9; } .col-9--xxxs > *, .col-9--xxxs::before, .col-9--xxxs::after { --container-columns: 9; } .col-9--xxxs.grid { --grid-columns: 9; } .start-9--xxxs { grid-column-start: 9; } .col-10--xxxs { --column-size: 10; } .col-10--xxxs > *, .col-10--xxxs::before, .col-10--xxxs::after { --container-columns: 10; } .col-10--xxxs.grid { --grid-columns: 10; } .start-10--xxxs { grid-column-start: 10; } .col-11--xxxs { --column-size: 11; } .col-11--xxxs > *, .col-11--xxxs::before, .col-11--xxxs::after { --container-columns: 11; } .col-11--xxxs.grid { --grid-columns: 11; } .start-11--xxxs { grid-column-start: 11; } .col-12--xxxs { --column-size: 12; } .col-12--xxxs > *, .col-12--xxxs::before, .col-12--xxxs::after { --container-columns: 12; } .col-12--xxxs.grid { --grid-columns: 12; } .start-12--xxxs { grid-column-start: 12; } .ml-0--xxxs { --offset-left-size: 0; } .ml-0--xxxs * { --offset-left-size: 0; } .mr-0--xxxs { --offset-right-size: 0; } .mr-0--xxxs * { --offset-right-size: 0; } .ml-1--xxxs { --offset-left-size: 1; } .ml-1--xxxs * { --offset-left-size: 0; } .mr-1--xxxs { --offset-right-size: 1; } .mr-1--xxxs * { --offset-right-size: 0; } .ml-2--xxxs { --offset-left-size: 2; } .ml-2--xxxs * { --offset-left-size: 0; } .mr-2--xxxs { --offset-right-size: 2; } .mr-2--xxxs * { --offset-right-size: 0; } .ml-3--xxxs { --offset-left-size: 3; } .ml-3--xxxs * { --offset-left-size: 0; } .mr-3--xxxs { --offset-right-size: 3; } .mr-3--xxxs * { --offset-right-size: 0; } .ml-4--xxxs { --offset-left-size: 4; } .ml-4--xxxs * { --offset-left-size: 0; } .mr-4--xxxs { --offset-right-size: 4; } .mr-4--xxxs * { --offset-right-size: 0; } .ml-5--xxxs { --offset-left-size: 5; } .ml-5--xxxs * { --offset-left-size: 0; } .mr-5--xxxs { --offset-right-size: 5; } .mr-5--xxxs * { --offset-right-size: 0; } .ml-6--xxxs { --offset-left-size: 6; } .ml-6--xxxs * { --offset-left-size: 0; } .mr-6--xxxs { --offset-right-size: 6; } .mr-6--xxxs * { --offset-right-size: 0; } .ml-7--xxxs { --offset-left-size: 7; } .ml-7--xxxs * { --offset-left-size: 0; } .mr-7--xxxs { --offset-right-size: 7; } .mr-7--xxxs * { --offset-right-size: 0; } .ml-8--xxxs { --offset-left-size: 8; } .ml-8--xxxs * { --offset-left-size: 0; } .mr-8--xxxs { --offset-right-size: 8; } .mr-8--xxxs * { --offset-right-size: 0; } .ml-9--xxxs { --offset-left-size: 9; } .ml-9--xxxs * { --offset-left-size: 0; } .mr-9--xxxs { --offset-right-size: 9; } .mr-9--xxxs * { --offset-right-size: 0; } .ml-10--xxxs { --offset-left-size: 10; } .ml-10--xxxs * { --offset-left-size: 0; } .mr-10--xxxs { --offset-right-size: 10; } .mr-10--xxxs * { --offset-right-size: 0; } .ml-11--xxxs { --offset-left-size: 11; } .ml-11--xxxs * { --offset-left-size: 0; } .mr-11--xxxs { --offset-right-size: 11; } .mr-11--xxxs * { --offset-right-size: 0; } .ml-12--xxxs { --offset-left-size: 12; } .ml-12--xxxs * { --offset-left-size: 0; } .mr-12--xxxs { --offset-right-size: 12; } .mr-12--xxxs * { --offset-right-size: 0; } } @media screen and ( min-width: 24.375em ) { .col-auto--xxs { --width: 0 0 auto; --min-width: auto; } .col-flow--xxs { --width: 1 1 0%; --min-width: auto; } .col-demi--xxs { --column-size: calc(var(--container-columns) * 0.5); } .col-third--key { --column-size: calc(var(--container-columns) / 3); } .col-full--xxs { --column-size: var(--container-columns); } .col-1--xxs { --column-size: 1; } .col-1--xxs > *, .col-1--xxs::before, .col-1--xxs::after { --container-columns: 1; } .col-1--xxs.grid { --grid-columns: 1; } .start-1--xxs { grid-column-start: 1; } .col-2--xxs { --column-size: 2; } .col-2--xxs > *, .col-2--xxs::before, .col-2--xxs::after { --container-columns: 2; } .col-2--xxs.grid { --grid-columns: 2; } .start-2--xxs { grid-column-start: 2; } .col-3--xxs { --column-size: 3; } .col-3--xxs > *, .col-3--xxs::before, .col-3--xxs::after { --container-columns: 3; } .col-3--xxs.grid { --grid-columns: 3; } .start-3--xxs { grid-column-start: 3; } .col-4--xxs { --column-size: 4; } .col-4--xxs > *, .col-4--xxs::before, .col-4--xxs::after { --container-columns: 4; } .col-4--xxs.grid { --grid-columns: 4; } .start-4--xxs { grid-column-start: 4; } .col-5--xxs { --column-size: 5; } .col-5--xxs > *, .col-5--xxs::before, .col-5--xxs::after { --container-columns: 5; } .col-5--xxs.grid { --grid-columns: 5; } .start-5--xxs { grid-column-start: 5; } .col-6--xxs { --column-size: 6; } .col-6--xxs > *, .col-6--xxs::before, .col-6--xxs::after { --container-columns: 6; } .col-6--xxs.grid { --grid-columns: 6; } .start-6--xxs { grid-column-start: 6; } .col-7--xxs { --column-size: 7; } .col-7--xxs > *, .col-7--xxs::before, .col-7--xxs::after { --container-columns: 7; } .col-7--xxs.grid { --grid-columns: 7; } .start-7--xxs { grid-column-start: 7; } .col-8--xxs { --column-size: 8; } .col-8--xxs > *, .col-8--xxs::before, .col-8--xxs::after { --container-columns: 8; } .col-8--xxs.grid { --grid-columns: 8; } .start-8--xxs { grid-column-start: 8; } .col-9--xxs { --column-size: 9; } .col-9--xxs > *, .col-9--xxs::before, .col-9--xxs::after { --container-columns: 9; } .col-9--xxs.grid { --grid-columns: 9; } .start-9--xxs { grid-column-start: 9; } .col-10--xxs { --column-size: 10; } .col-10--xxs > *, .col-10--xxs::before, .col-10--xxs::after { --container-columns: 10; } .col-10--xxs.grid { --grid-columns: 10; } .start-10--xxs { grid-column-start: 10; } .col-11--xxs { --column-size: 11; } .col-11--xxs > *, .col-11--xxs::before, .col-11--xxs::after { --container-columns: 11; } .col-11--xxs.grid { --grid-columns: 11; } .start-11--xxs { grid-column-start: 11; } .col-12--xxs { --column-size: 12; } .col-12--xxs > *, .col-12--xxs::before, .col-12--xxs::after { --container-columns: 12; } .col-12--xxs.grid { --grid-columns: 12; } .start-12--xxs { grid-column-start: 12; } .ml-0--xxs { --offset-left-size: 0; } .ml-0--xxs * { --offset-left-size: 0; } .mr-0--xxs { --offset-right-size: 0; } .mr-0--xxs * { --offset-right-size: 0; } .ml-1--xxs { --offset-left-size: 1; } .ml-1--xxs * { --offset-left-size: 0; } .mr-1--xxs { --offset-right-size: 1; } .mr-1--xxs * { --offset-right-size: 0; } .ml-2--xxs { --offset-left-size: 2; } .ml-2--xxs * { --offset-left-size: 0; } .mr-2--xxs { --offset-right-size: 2; } .mr-2--xxs * { --offset-right-size: 0; } .ml-3--xxs { --offset-left-size: 3; } .ml-3--xxs * { --offset-left-size: 0; } .mr-3--xxs { --offset-right-size: 3; } .mr-3--xxs * { --offset-right-size: 0; } .ml-4--xxs { --offset-left-size: 4; } .ml-4--xxs * { --offset-left-size: 0; } .mr-4--xxs { --offset-right-size: 4; } .mr-4--xxs * { --offset-right-size: 0; } .ml-5--xxs { --offset-left-size: 5; } .ml-5--xxs * { --offset-left-size: 0; } .mr-5--xxs { --offset-right-size: 5; } .mr-5--xxs * { --offset-right-size: 0; } .ml-6--xxs { --offset-left-size: 6; } .ml-6--xxs * { --offset-left-size: 0; } .mr-6--xxs { --offset-right-size: 6; } .mr-6--xxs * { --offset-right-size: 0; } .ml-7--xxs { --offset-left-size: 7; } .ml-7--xxs * { --offset-left-size: 0; } .mr-7--xxs { --offset-right-size: 7; } .mr-7--xxs * { --offset-right-size: 0; } .ml-8--xxs { --offset-left-size: 8; } .ml-8--xxs * { --offset-left-size: 0; } .mr-8--xxs { --offset-right-size: 8; } .mr-8--xxs * { --offset-right-size: 0; } .ml-9--xxs { --offset-left-size: 9; } .ml-9--xxs * { --offset-left-size: 0; } .mr-9--xxs { --offset-right-size: 9; } .mr-9--xxs * { --offset-right-size: 0; } .ml-10--xxs { --offset-left-size: 10; } .ml-10--xxs * { --offset-left-size: 0; } .mr-10--xxs { --offset-right-size: 10; } .mr-10--xxs * { --offset-right-size: 0; } .ml-11--xxs { --offset-left-size: 11; } .ml-11--xxs * { --offset-left-size: 0; } .mr-11--xxs { --offset-right-size: 11; } .mr-11--xxs * { --offset-right-size: 0; } .ml-12--xxs { --offset-left-size: 12; } .ml-12--xxs * { --offset-left-size: 0; } .mr-12--xxs { --offset-right-size: 12; } .mr-12--xxs * { --offset-right-size: 0; } } @media screen and ( min-width: 26.75em ) { .col-auto--xs { --width: 0 0 auto; --min-width: auto; } .col-flow--xs { --width: 1 1 0%; --min-width: auto; } .col-demi--xs { --column-size: calc(var(--container-columns) * 0.5); } .col-third--key { --column-size: calc(var(--container-columns) / 3); } .col-full--xs { --column-size: var(--container-columns); } .col-1--xs { --column-size: 1; } .col-1--xs > *, .col-1--xs::before, .col-1--xs::after { --container-columns: 1; } .col-1--xs.grid { --grid-columns: 1; } .start-1--xs { grid-column-start: 1; } .col-2--xs { --column-size: 2; } .col-2--xs > *, .col-2--xs::before, .col-2--xs::after { --container-columns: 2; } .col-2--xs.grid { --grid-columns: 2; } .start-2--xs { grid-column-start: 2; } .col-3--xs { --column-size: 3; } .col-3--xs > *, .col-3--xs::before, .col-3--xs::after { --container-columns: 3; } .col-3--xs.grid { --grid-columns: 3; } .start-3--xs { grid-column-start: 3; } .col-4--xs { --column-size: 4; } .col-4--xs > *, .col-4--xs::before, .col-4--xs::after { --container-columns: 4; } .col-4--xs.grid { --grid-columns: 4; } .start-4--xs { grid-column-start: 4; } .col-5--xs { --column-size: 5; } .col-5--xs > *, .col-5--xs::before, .col-5--xs::after { --container-columns: 5; } .col-5--xs.grid { --grid-columns: 5; } .start-5--xs { grid-column-start: 5; } .col-6--xs { --column-size: 6; } .col-6--xs > *, .col-6--xs::before, .col-6--xs::after { --container-columns: 6; } .col-6--xs.grid { --grid-columns: 6; } .start-6--xs { grid-column-start: 6; } .col-7--xs { --column-size: 7; } .col-7--xs > *, .col-7--xs::before, .col-7--xs::after { --container-columns: 7; } .col-7--xs.grid { --grid-columns: 7; } .start-7--xs { grid-column-start: 7; } .col-8--xs { --column-size: 8; } .col-8--xs > *, .col-8--xs::before, .col-8--xs::after { --container-columns: 8; } .col-8--xs.grid { --grid-columns: 8; } .start-8--xs { grid-column-start: 8; } .col-9--xs { --column-size: 9; } .col-9--xs > *, .col-9--xs::before, .col-9--xs::after { --container-columns: 9; } .col-9--xs.grid { --grid-columns: 9; } .start-9--xs { grid-column-start: 9; } .col-10--xs { --column-size: 10; } .col-10--xs > *, .col-10--xs::before, .col-10--xs::after { --container-columns: 10; } .col-10--xs.grid { --grid-columns: 10; } .start-10--xs { grid-column-start: 10; } .col-11--xs { --column-size: 11; } .col-11--xs > *, .col-11--xs::before, .col-11--xs::after { --container-columns: 11; } .col-11--xs.grid { --grid-columns: 11; } .start-11--xs { grid-column-start: 11; } .col-12--xs { --column-size: 12; } .col-12--xs > *, .col-12--xs::before, .col-12--xs::after { --container-columns: 12; } .col-12--xs.grid { --grid-columns: 12; } .start-12--xs { grid-column-start: 12; } .ml-0--xs { --offset-left-size: 0; } .ml-0--xs * { --offset-left-size: 0; } .mr-0--xs { --offset-right-size: 0; } .mr-0--xs * { --offset-right-size: 0; } .ml-1--xs { --offset-left-size: 1; } .ml-1--xs * { --offset-left-size: 0; } .mr-1--xs { --offset-right-size: 1; } .mr-1--xs * { --offset-right-size: 0; } .ml-2--xs { --offset-left-size: 2; } .ml-2--xs * { --offset-left-size: 0; } .mr-2--xs { --offset-right-size: 2; } .mr-2--xs * { --offset-right-size: 0; } .ml-3--xs { --offset-left-size: 3; } .ml-3--xs * { --offset-left-size: 0; } .mr-3--xs { --offset-right-size: 3; } .mr-3--xs * { --offset-right-size: 0; } .ml-4--xs { --offset-left-size: 4; } .ml-4--xs * { --offset-left-size: 0; } .mr-4--xs { --offset-right-size: 4; } .mr-4--xs * { --offset-right-size: 0; } .ml-5--xs { --offset-left-size: 5; } .ml-5--xs * { --offset-left-size: 0; } .mr-5--xs { --offset-right-size: 5; } .mr-5--xs * { --offset-right-size: 0; } .ml-6--xs { --offset-left-size: 6; } .ml-6--xs * { --offset-left-size: 0; } .mr-6--xs { --offset-right-size: 6; } .mr-6--xs * { --offset-right-size: 0; } .ml-7--xs { --offset-left-size: 7; } .ml-7--xs * { --offset-left-size: 0; } .mr-7--xs { --offset-right-size: 7; } .mr-7--xs * { --offset-right-size: 0; } .ml-8--xs { --offset-left-size: 8; } .ml-8--xs * { --offset-left-size: 0; } .mr-8--xs { --offset-right-size: 8; } .mr-8--xs * { --offset-right-size: 0; } .ml-9--xs { --offset-left-size: 9; } .ml-9--xs * { --offset-left-size: 0; } .mr-9--xs { --offset-right-size: 9; } .mr-9--xs * { --offset-right-size: 0; } .ml-10--xs { --offset-left-size: 10; } .ml-10--xs * { --offset-left-size: 0; } .mr-10--xs { --offset-right-size: 10; } .mr-10--xs * { --offset-right-size: 0; } .ml-11--xs { --offset-left-size: 11; } .ml-11--xs * { --offset-left-size: 0; } .mr-11--xs { --offset-right-size: 11; } .mr-11--xs * { --offset-right-size: 0; } .ml-12--xs { --offset-left-size: 12; } .ml-12--xs * { --offset-left-size: 0; } .mr-12--xs { --offset-right-size: 12; } .mr-12--xs * { --offset-right-size: 0; } } @media screen and ( min-width: 40em ) { .col-auto--xs-mid { --width: 0 0 auto; --min-width: auto; } .col-flow--xs-mid { --width: 1 1 0%; --min-width: auto; } .col-demi--xs-mid { --column-size: calc(var(--container-columns) * 0.5); } .col-third--key { --column-size: calc(var(--container-columns) / 3); } .col-full--xs-mid { --column-size: var(--container-columns); } .col-1--xs-mid { --column-size: 1; } .col-1--xs-mid > *, .col-1--xs-mid::before, .col-1--xs-mid::after { --container-columns: 1; } .col-1--xs-mid.grid { --grid-columns: 1; } .start-1--xs-mid { grid-column-start: 1; } .col-2--xs-mid { --column-size: 2; } .col-2--xs-mid > *, .col-2--xs-mid::before, .col-2--xs-mid::after { --container-columns: 2; } .col-2--xs-mid.grid { --grid-columns: 2; } .start-2--xs-mid { grid-column-start: 2; } .col-3--xs-mid { --column-size: 3; } .col-3--xs-mid > *, .col-3--xs-mid::before, .col-3--xs-mid::after { --container-columns: 3; } .col-3--xs-mid.grid { --grid-columns: 3; } .start-3--xs-mid { grid-column-start: 3; } .col-4--xs-mid { --column-size: 4; } .col-4--xs-mid > *, .col-4--xs-mid::before, .col-4--xs-mid::after { --container-columns: 4; } .col-4--xs-mid.grid { --grid-columns: 4; } .start-4--xs-mid { grid-column-start: 4; } .col-5--xs-mid { --column-size: 5; } .col-5--xs-mid > *, .col-5--xs-mid::before, .col-5--xs-mid::after { --container-columns: 5; } .col-5--xs-mid.grid { --grid-columns: 5; } .start-5--xs-mid { grid-column-start: 5; } .col-6--xs-mid { --column-size: 6; } .col-6--xs-mid > *, .col-6--xs-mid::before, .col-6--xs-mid::after { --container-columns: 6; } .col-6--xs-mid.grid { --grid-columns: 6; } .start-6--xs-mid { grid-column-start: 6; } .col-7--xs-mid { --column-size: 7; } .col-7--xs-mid > *, .col-7--xs-mid::before, .col-7--xs-mid::after { --container-columns: 7; } .col-7--xs-mid.grid { --grid-columns: 7; } .start-7--xs-mid { grid-column-start: 7; } .col-8--xs-mid { --column-size: 8; } .col-8--xs-mid > *, .col-8--xs-mid::before, .col-8--xs-mid::after { --container-columns: 8; } .col-8--xs-mid.grid { --grid-columns: 8; } .start-8--xs-mid { grid-column-start: 8; } .col-9--xs-mid { --column-size: 9; } .col-9--xs-mid > *, .col-9--xs-mid::before, .col-9--xs-mid::after { --container-columns: 9; } .col-9--xs-mid.grid { --grid-columns: 9; } .start-9--xs-mid { grid-column-start: 9; } .col-10--xs-mid { --column-size: 10; } .col-10--xs-mid > *, .col-10--xs-mid::before, .col-10--xs-mid::after { --container-columns: 10; } .col-10--xs-mid.grid { --grid-columns: 10; } .start-10--xs-mid { grid-column-start: 10; } .col-11--xs-mid { --column-size: 11; } .col-11--xs-mid > *, .col-11--xs-mid::before, .col-11--xs-mid::after { --container-columns: 11; } .col-11--xs-mid.grid { --grid-columns: 11; } .start-11--xs-mid { grid-column-start: 11; } .col-12--xs-mid { --column-size: 12; } .col-12--xs-mid > *, .col-12--xs-mid::before, .col-12--xs-mid::after { --container-columns: 12; } .col-12--xs-mid.grid { --grid-columns: 12; } .start-12--xs-mid { grid-column-start: 12; } .ml-0--xs-mid { --offset-left-size: 0; } .ml-0--xs-mid * { --offset-left-size: 0; } .mr-0--xs-mid { --offset-right-size: 0; } .mr-0--xs-mid * { --offset-right-size: 0; } .ml-1--xs-mid { --offset-left-size: 1; } .ml-1--xs-mid * { --offset-left-size: 0; } .mr-1--xs-mid { --offset-right-size: 1; } .mr-1--xs-mid * { --offset-right-size: 0; } .ml-2--xs-mid { --offset-left-size: 2; } .ml-2--xs-mid * { --offset-left-size: 0; } .mr-2--xs-mid { --offset-right-size: 2; } .mr-2--xs-mid * { --offset-right-size: 0; } .ml-3--xs-mid { --offset-left-size: 3; } .ml-3--xs-mid * { --offset-left-size: 0; } .mr-3--xs-mid { --offset-right-size: 3; } .mr-3--xs-mid * { --offset-right-size: 0; } .ml-4--xs-mid { --offset-left-size: 4; } .ml-4--xs-mid * { --offset-left-size: 0; } .mr-4--xs-mid { --offset-right-size: 4; } .mr-4--xs-mid * { --offset-right-size: 0; } .ml-5--xs-mid { --offset-left-size: 5; } .ml-5--xs-mid * { --offset-left-size: 0; } .mr-5--xs-mid { --offset-right-size: 5; } .mr-5--xs-mid * { --offset-right-size: 0; } .ml-6--xs-mid { --offset-left-size: 6; } .ml-6--xs-mid * { --offset-left-size: 0; } .mr-6--xs-mid { --offset-right-size: 6; } .mr-6--xs-mid * { --offset-right-size: 0; } .ml-7--xs-mid { --offset-left-size: 7; } .ml-7--xs-mid * { --offset-left-size: 0; } .mr-7--xs-mid { --offset-right-size: 7; } .mr-7--xs-mid * { --offset-right-size: 0; } .ml-8--xs-mid { --offset-left-size: 8; } .ml-8--xs-mid * { --offset-left-size: 0; } .mr-8--xs-mid { --offset-right-size: 8; } .mr-8--xs-mid * { --offset-right-size: 0; } .ml-9--xs-mid { --offset-left-size: 9; } .ml-9--xs-mid * { --offset-left-size: 0; } .mr-9--xs-mid { --offset-right-size: 9; } .mr-9--xs-mid * { --offset-right-size: 0; } .ml-10--xs-mid { --offset-left-size: 10; } .ml-10--xs-mid * { --offset-left-size: 0; } .mr-10--xs-mid { --offset-right-size: 10; } .mr-10--xs-mid * { --offset-right-size: 0; } .ml-11--xs-mid { --offset-left-size: 11; } .ml-11--xs-mid * { --offset-left-size: 0; } .mr-11--xs-mid { --offset-right-size: 11; } .mr-11--xs-mid * { --offset-right-size: 0; } .ml-12--xs-mid { --offset-left-size: 12; } .ml-12--xs-mid * { --offset-left-size: 0; } .mr-12--xs-mid { --offset-right-size: 12; } .mr-12--xs-mid * { --offset-right-size: 0; } } @media screen and ( min-width: 48em ) { .col-auto--sm { --width: 0 0 auto; --min-width: auto; } .col-flow--sm { --width: 1 1 0%; --min-width: auto; } .col-demi--sm { --column-size: calc(var(--container-columns) * 0.5); } .col-third--key { --column-size: calc(var(--container-columns) / 3); } .col-full--sm { --column-size: var(--container-columns); } .col-1--sm { --column-size: 1; } .col-1--sm > *, .col-1--sm::before, .col-1--sm::after { --container-columns: 1; } .col-1--sm.grid { --grid-columns: 1; } .start-1--sm { grid-column-start: 1; } .col-2--sm { --column-size: 2; } .col-2--sm > *, .col-2--sm::before, .col-2--sm::after { --container-columns: 2; } .col-2--sm.grid { --grid-columns: 2; } .start-2--sm { grid-column-start: 2; } .col-3--sm { --column-size: 3; } .col-3--sm > *, .col-3--sm::before, .col-3--sm::after { --container-columns: 3; } .col-3--sm.grid { --grid-columns: 3; } .start-3--sm { grid-column-start: 3; } .col-4--sm { --column-size: 4; } .col-4--sm > *, .col-4--sm::before, .col-4--sm::after { --container-columns: 4; } .col-4--sm.grid { --grid-columns: 4; } .start-4--sm { grid-column-start: 4; } .col-5--sm { --column-size: 5; } .col-5--sm > *, .col-5--sm::before, .col-5--sm::after { --container-columns: 5; } .col-5--sm.grid { --grid-columns: 5; } .start-5--sm { grid-column-start: 5; } .col-6--sm { --column-size: 6; } .col-6--sm > *, .col-6--sm::before, .col-6--sm::after { --container-columns: 6; } .col-6--sm.grid { --grid-columns: 6; } .start-6--sm { grid-column-start: 6; } .col-7--sm { --column-size: 7; } .col-7--sm > *, .col-7--sm::before, .col-7--sm::after { --container-columns: 7; } .col-7--sm.grid { --grid-columns: 7; } .start-7--sm { grid-column-start: 7; } .col-8--sm { --column-size: 8; } .col-8--sm > *, .col-8--sm::before, .col-8--sm::after { --container-columns: 8; } .col-8--sm.grid { --grid-columns: 8; } .start-8--sm { grid-column-start: 8; } .col-9--sm { --column-size: 9; } .col-9--sm > *, .col-9--sm::before, .col-9--sm::after { --container-columns: 9; } .col-9--sm.grid { --grid-columns: 9; } .start-9--sm { grid-column-start: 9; } .col-10--sm { --column-size: 10; } .col-10--sm > *, .col-10--sm::before, .col-10--sm::after { --container-columns: 10; } .col-10--sm.grid { --grid-columns: 10; } .start-10--sm { grid-column-start: 10; } .col-11--sm { --column-size: 11; } .col-11--sm > *, .col-11--sm::before, .col-11--sm::after { --container-columns: 11; } .col-11--sm.grid { --grid-columns: 11; } .start-11--sm { grid-column-start: 11; } .col-12--sm { --column-size: 12; } .col-12--sm > *, .col-12--sm::before, .col-12--sm::after { --container-columns: 12; } .col-12--sm.grid { --grid-columns: 12; } .start-12--sm { grid-column-start: 12; } .ml-0--sm { --offset-left-size: 0; } .ml-0--sm * { --offset-left-size: 0; } .mr-0--sm { --offset-right-size: 0; } .mr-0--sm * { --offset-right-size: 0; } .ml-1--sm { --offset-left-size: 1; } .ml-1--sm * { --offset-left-size: 0; } .mr-1--sm { --offset-right-size: 1; } .mr-1--sm * { --offset-right-size: 0; } .ml-2--sm { --offset-left-size: 2; } .ml-2--sm * { --offset-left-size: 0; } .mr-2--sm { --offset-right-size: 2; } .mr-2--sm * { --offset-right-size: 0; } .ml-3--sm { --offset-left-size: 3; } .ml-3--sm * { --offset-left-size: 0; } .mr-3--sm { --offset-right-size: 3; } .mr-3--sm * { --offset-right-size: 0; } .ml-4--sm { --offset-left-size: 4; } .ml-4--sm * { --offset-left-size: 0; } .mr-4--sm { --offset-right-size: 4; } .mr-4--sm * { --offset-right-size: 0; } .ml-5--sm { --offset-left-size: 5; } .ml-5--sm * { --offset-left-size: 0; } .mr-5--sm { --offset-right-size: 5; } .mr-5--sm * { --offset-right-size: 0; } .ml-6--sm { --offset-left-size: 6; } .ml-6--sm * { --offset-left-size: 0; } .mr-6--sm { --offset-right-size: 6; } .mr-6--sm * { --offset-right-size: 0; } .ml-7--sm { --offset-left-size: 7; } .ml-7--sm * { --offset-left-size: 0; } .mr-7--sm { --offset-right-size: 7; } .mr-7--sm * { --offset-right-size: 0; } .ml-8--sm { --offset-left-size: 8; } .ml-8--sm * { --offset-left-size: 0; } .mr-8--sm { --offset-right-size: 8; } .mr-8--sm * { --offset-right-size: 0; } .ml-9--sm { --offset-left-size: 9; } .ml-9--sm * { --offset-left-size: 0; } .mr-9--sm { --offset-right-size: 9; } .mr-9--sm * { --offset-right-size: 0; } .ml-10--sm { --offset-left-size: 10; } .ml-10--sm * { --offset-left-size: 0; } .mr-10--sm { --offset-right-size: 10; } .mr-10--sm * { --offset-right-size: 0; } .ml-11--sm { --offset-left-size: 11; } .ml-11--sm * { --offset-left-size: 0; } .mr-11--sm { --offset-right-size: 11; } .mr-11--sm * { --offset-right-size: 0; } .ml-12--sm { --offset-left-size: 12; } .ml-12--sm * { --offset-left-size: 0; } .mr-12--sm { --offset-right-size: 12; } .mr-12--sm * { --offset-right-size: 0; } } @media screen and ( min-width: 50.625em ) { .col-auto--sm-mid { --width: 0 0 auto; --min-width: auto; } .col-flow--sm-mid { --width: 1 1 0%; --min-width: auto; } .col-demi--sm-mid { --column-size: calc(var(--container-columns) * 0.5); } .col-third--key { --column-size: calc(var(--container-columns) / 3); } .col-full--sm-mid { --column-size: var(--container-columns); } .col-1--sm-mid { --column-size: 1; } .col-1--sm-mid > *, .col-1--sm-mid::before, .col-1--sm-mid::after { --container-columns: 1; } .col-1--sm-mid.grid { --grid-columns: 1; } .start-1--sm-mid { grid-column-start: 1; } .col-2--sm-mid { --column-size: 2; } .col-2--sm-mid > *, .col-2--sm-mid::before, .col-2--sm-mid::after { --container-columns: 2; } .col-2--sm-mid.grid { --grid-columns: 2; } .start-2--sm-mid { grid-column-start: 2; } .col-3--sm-mid { --column-size: 3; } .col-3--sm-mid > *, .col-3--sm-mid::before, .col-3--sm-mid::after { --container-columns: 3; } .col-3--sm-mid.grid { --grid-columns: 3; } .start-3--sm-mid { grid-column-start: 3; } .col-4--sm-mid { --column-size: 4; } .col-4--sm-mid > *, .col-4--sm-mid::before, .col-4--sm-mid::after { --container-columns: 4; } .col-4--sm-mid.grid { --grid-columns: 4; } .start-4--sm-mid { grid-column-start: 4; } .col-5--sm-mid { --column-size: 5; } .col-5--sm-mid > *, .col-5--sm-mid::before, .col-5--sm-mid::after { --container-columns: 5; } .col-5--sm-mid.grid { --grid-columns: 5; } .start-5--sm-mid { grid-column-start: 5; } .col-6--sm-mid { --column-size: 6; } .col-6--sm-mid > *, .col-6--sm-mid::before, .col-6--sm-mid::after { --container-columns: 6; } .col-6--sm-mid.grid { --grid-columns: 6; } .start-6--sm-mid { grid-column-start: 6; } .col-7--sm-mid { --column-size: 7; } .col-7--sm-mid > *, .col-7--sm-mid::before, .col-7--sm-mid::after { --container-columns: 7; } .col-7--sm-mid.grid { --grid-columns: 7; } .start-7--sm-mid { grid-column-start: 7; } .col-8--sm-mid { --column-size: 8; } .col-8--sm-mid > *, .col-8--sm-mid::before, .col-8--sm-mid::after { --container-columns: 8; } .col-8--sm-mid.grid { --grid-columns: 8; } .start-8--sm-mid { grid-column-start: 8; } .col-9--sm-mid { --column-size: 9; } .col-9--sm-mid > *, .col-9--sm-mid::before, .col-9--sm-mid::after { --container-columns: 9; } .col-9--sm-mid.grid { --grid-columns: 9; } .start-9--sm-mid { grid-column-start: 9; } .col-10--sm-mid { --column-size: 10; } .col-10--sm-mid > *, .col-10--sm-mid::before, .col-10--sm-mid::after { --container-columns: 10; } .col-10--sm-mid.grid { --grid-columns: 10; } .start-10--sm-mid { grid-column-start: 10; } .col-11--sm-mid { --column-size: 11; } .col-11--sm-mid > *, .col-11--sm-mid::before, .col-11--sm-mid::after { --container-columns: 11; } .col-11--sm-mid.grid { --grid-columns: 11; } .start-11--sm-mid { grid-column-start: 11; } .col-12--sm-mid { --column-size: 12; } .col-12--sm-mid > *, .col-12--sm-mid::before, .col-12--sm-mid::after { --container-columns: 12; } .col-12--sm-mid.grid { --grid-columns: 12; } .start-12--sm-mid { grid-column-start: 12; } .ml-0--sm-mid { --offset-left-size: 0; } .ml-0--sm-mid * { --offset-left-size: 0; } .mr-0--sm-mid { --offset-right-size: 0; } .mr-0--sm-mid * { --offset-right-size: 0; } .ml-1--sm-mid { --offset-left-size: 1; } .ml-1--sm-mid * { --offset-left-size: 0; } .mr-1--sm-mid { --offset-right-size: 1; } .mr-1--sm-mid * { --offset-right-size: 0; } .ml-2--sm-mid { --offset-left-size: 2; } .ml-2--sm-mid * { --offset-left-size: 0; } .mr-2--sm-mid { --offset-right-size: 2; } .mr-2--sm-mid * { --offset-right-size: 0; } .ml-3--sm-mid { --offset-left-size: 3; } .ml-3--sm-mid * { --offset-left-size: 0; } .mr-3--sm-mid { --offset-right-size: 3; } .mr-3--sm-mid * { --offset-right-size: 0; } .ml-4--sm-mid { --offset-left-size: 4; } .ml-4--sm-mid * { --offset-left-size: 0; } .mr-4--sm-mid { --offset-right-size: 4; } .mr-4--sm-mid * { --offset-right-size: 0; } .ml-5--sm-mid { --offset-left-size: 5; } .ml-5--sm-mid * { --offset-left-size: 0; } .mr-5--sm-mid { --offset-right-size: 5; } .mr-5--sm-mid * { --offset-right-size: 0; } .ml-6--sm-mid { --offset-left-size: 6; } .ml-6--sm-mid * { --offset-left-size: 0; } .mr-6--sm-mid { --offset-right-size: 6; } .mr-6--sm-mid * { --offset-right-size: 0; } .ml-7--sm-mid { --offset-left-size: 7; } .ml-7--sm-mid * { --offset-left-size: 0; } .mr-7--sm-mid { --offset-right-size: 7; } .mr-7--sm-mid * { --offset-right-size: 0; } .ml-8--sm-mid { --offset-left-size: 8; } .ml-8--sm-mid * { --offset-left-size: 0; } .mr-8--sm-mid { --offset-right-size: 8; } .mr-8--sm-mid * { --offset-right-size: 0; } .ml-9--sm-mid { --offset-left-size: 9; } .ml-9--sm-mid * { --offset-left-size: 0; } .mr-9--sm-mid { --offset-right-size: 9; } .mr-9--sm-mid * { --offset-right-size: 0; } .ml-10--sm-mid { --offset-left-size: 10; } .ml-10--sm-mid * { --offset-left-size: 0; } .mr-10--sm-mid { --offset-right-size: 10; } .mr-10--sm-mid * { --offset-right-size: 0; } .ml-11--sm-mid { --offset-left-size: 11; } .ml-11--sm-mid * { --offset-left-size: 0; } .mr-11--sm-mid { --offset-right-size: 11; } .mr-11--sm-mid * { --offset-right-size: 0; } .ml-12--sm-mid { --offset-left-size: 12; } .ml-12--sm-mid * { --offset-left-size: 0; } .mr-12--sm-mid { --offset-right-size: 12; } .mr-12--sm-mid * { --offset-right-size: 0; } } @media screen and ( min-width: 64em ) { .col-auto--md { --width: 0 0 auto; --min-width: auto; } .col-flow--md { --width: 1 1 0%; --min-width: auto; } .col-demi--md { --column-size: calc(var(--container-columns) * 0.5); } .col-third--key { --column-size: calc(var(--container-columns) / 3); } .col-full--md { --column-size: var(--container-columns); } .col-1--md { --column-size: 1; } .col-1--md > *, .col-1--md::before, .col-1--md::after { --container-columns: 1; } .col-1--md.grid { --grid-columns: 1; } .start-1--md { grid-column-start: 1; } .col-2--md { --column-size: 2; } .col-2--md > *, .col-2--md::before, .col-2--md::after { --container-columns: 2; } .col-2--md.grid { --grid-columns: 2; } .start-2--md { grid-column-start: 2; } .col-3--md { --column-size: 3; } .col-3--md > *, .col-3--md::before, .col-3--md::after { --container-columns: 3; } .col-3--md.grid { --grid-columns: 3; } .start-3--md { grid-column-start: 3; } .col-4--md { --column-size: 4; } .col-4--md > *, .col-4--md::before, .col-4--md::after { --container-columns: 4; } .col-4--md.grid { --grid-columns: 4; } .start-4--md { grid-column-start: 4; } .col-5--md { --column-size: 5; } .col-5--md > *, .col-5--md::before, .col-5--md::after { --container-columns: 5; } .col-5--md.grid { --grid-columns: 5; } .start-5--md { grid-column-start: 5; } .col-6--md { --column-size: 6; } .col-6--md > *, .col-6--md::before, .col-6--md::after { --container-columns: 6; } .col-6--md.grid { --grid-columns: 6; } .start-6--md { grid-column-start: 6; } .col-7--md { --column-size: 7; } .col-7--md > *, .col-7--md::before, .col-7--md::after { --container-columns: 7; } .col-7--md.grid { --grid-columns: 7; } .start-7--md { grid-column-start: 7; } .col-8--md { --column-size: 8; } .col-8--md > *, .col-8--md::before, .col-8--md::after { --container-columns: 8; } .col-8--md.grid { --grid-columns: 8; } .start-8--md { grid-column-start: 8; } .col-9--md { --column-size: 9; } .col-9--md > *, .col-9--md::before, .col-9--md::after { --container-columns: 9; } .col-9--md.grid { --grid-columns: 9; } .start-9--md { grid-column-start: 9; } .col-10--md { --column-size: 10; } .col-10--md > *, .col-10--md::before, .col-10--md::after { --container-columns: 10; } .col-10--md.grid { --grid-columns: 10; } .start-10--md { grid-column-start: 10; } .col-11--md { --column-size: 11; } .col-11--md > *, .col-11--md::before, .col-11--md::after { --container-columns: 11; } .col-11--md.grid { --grid-columns: 11; } .start-11--md { grid-column-start: 11; } .col-12--md { --column-size: 12; } .col-12--md > *, .col-12--md::before, .col-12--md::after { --container-columns: 12; } .col-12--md.grid { --grid-columns: 12; } .start-12--md { grid-column-start: 12; } .ml-0--md { --offset-left-size: 0; } .ml-0--md * { --offset-left-size: 0; } .mr-0--md { --offset-right-size: 0; } .mr-0--md * { --offset-right-size: 0; } .ml-1--md { --offset-left-size: 1; } .ml-1--md * { --offset-left-size: 0; } .mr-1--md { --offset-right-size: 1; } .mr-1--md * { --offset-right-size: 0; } .ml-2--md { --offset-left-size: 2; } .ml-2--md * { --offset-left-size: 0; } .mr-2--md { --offset-right-size: 2; } .mr-2--md * { --offset-right-size: 0; } .ml-3--md { --offset-left-size: 3; } .ml-3--md * { --offset-left-size: 0; } .mr-3--md { --offset-right-size: 3; } .mr-3--md * { --offset-right-size: 0; } .ml-4--md { --offset-left-size: 4; } .ml-4--md * { --offset-left-size: 0; } .mr-4--md { --offset-right-size: 4; } .mr-4--md * { --offset-right-size: 0; } .ml-5--md { --offset-left-size: 5; } .ml-5--md * { --offset-left-size: 0; } .mr-5--md { --offset-right-size: 5; } .mr-5--md * { --offset-right-size: 0; } .ml-6--md { --offset-left-size: 6; } .ml-6--md * { --offset-left-size: 0; } .mr-6--md { --offset-right-size: 6; } .mr-6--md * { --offset-right-size: 0; } .ml-7--md { --offset-left-size: 7; } .ml-7--md * { --offset-left-size: 0; } .mr-7--md { --offset-right-size: 7; } .mr-7--md * { --offset-right-size: 0; } .ml-8--md { --offset-left-size: 8; } .ml-8--md * { --offset-left-size: 0; } .mr-8--md { --offset-right-size: 8; } .mr-8--md * { --offset-right-size: 0; } .ml-9--md { --offset-left-size: 9; } .ml-9--md * { --offset-left-size: 0; } .mr-9--md { --offset-right-size: 9; } .mr-9--md * { --offset-right-size: 0; } .ml-10--md { --offset-left-size: 10; } .ml-10--md * { --offset-left-size: 0; } .mr-10--md { --offset-right-size: 10; } .mr-10--md * { --offset-right-size: 0; } .ml-11--md { --offset-left-size: 11; } .ml-11--md * { --offset-left-size: 0; } .mr-11--md { --offset-right-size: 11; } .mr-11--md * { --offset-right-size: 0; } .ml-12--md { --offset-left-size: 12; } .ml-12--md * { --offset-left-size: 0; } .mr-12--md { --offset-right-size: 12; } .mr-12--md * { --offset-right-size: 0; } } @media screen and ( min-width: 80em ) { .col-auto--md-mid { --width: 0 0 auto; --min-width: auto; } .col-flow--md-mid { --width: 1 1 0%; --min-width: auto; } .col-demi--md-mid { --column-size: calc(var(--container-columns) * 0.5); } .col-third--key { --column-size: calc(var(--container-columns) / 3); } .col-full--md-mid { --column-size: var(--container-columns); } .col-1--md-mid { --column-size: 1; } .col-1--md-mid > *, .col-1--md-mid::before, .col-1--md-mid::after { --container-columns: 1; } .col-1--md-mid.grid { --grid-columns: 1; } .start-1--md-mid { grid-column-start: 1; } .col-2--md-mid { --column-size: 2; } .col-2--md-mid > *, .col-2--md-mid::before, .col-2--md-mid::after { --container-columns: 2; } .col-2--md-mid.grid { --grid-columns: 2; } .start-2--md-mid { grid-column-start: 2; } .col-3--md-mid { --column-size: 3; } .col-3--md-mid > *, .col-3--md-mid::before, .col-3--md-mid::after { --container-columns: 3; } .col-3--md-mid.grid { --grid-columns: 3; } .start-3--md-mid { grid-column-start: 3; } .col-4--md-mid { --column-size: 4; } .col-4--md-mid > *, .col-4--md-mid::before, .col-4--md-mid::after { --container-columns: 4; } .col-4--md-mid.grid { --grid-columns: 4; } .start-4--md-mid { grid-column-start: 4; } .col-5--md-mid { --column-size: 5; } .col-5--md-mid > *, .col-5--md-mid::before, .col-5--md-mid::after { --container-columns: 5; } .col-5--md-mid.grid { --grid-columns: 5; } .start-5--md-mid { grid-column-start: 5; } .col-6--md-mid { --column-size: 6; } .col-6--md-mid > *, .col-6--md-mid::before, .col-6--md-mid::after { --container-columns: 6; } .col-6--md-mid.grid { --grid-columns: 6; } .start-6--md-mid { grid-column-start: 6; } .col-7--md-mid { --column-size: 7; } .col-7--md-mid > *, .col-7--md-mid::before, .col-7--md-mid::after { --container-columns: 7; } .col-7--md-mid.grid { --grid-columns: 7; } .start-7--md-mid { grid-column-start: 7; } .col-8--md-mid { --column-size: 8; } .col-8--md-mid > *, .col-8--md-mid::before, .col-8--md-mid::after { --container-columns: 8; } .col-8--md-mid.grid { --grid-columns: 8; } .start-8--md-mid { grid-column-start: 8; } .col-9--md-mid { --column-size: 9; } .col-9--md-mid > *, .col-9--md-mid::before, .col-9--md-mid::after { --container-columns: 9; } .col-9--md-mid.grid { --grid-columns: 9; } .start-9--md-mid { grid-column-start: 9; } .col-10--md-mid { --column-size: 10; } .col-10--md-mid > *, .col-10--md-mid::before, .col-10--md-mid::after { --container-columns: 10; } .col-10--md-mid.grid { --grid-columns: 10; } .start-10--md-mid { grid-column-start: 10; } .col-11--md-mid { --column-size: 11; } .col-11--md-mid > *, .col-11--md-mid::before, .col-11--md-mid::after { --container-columns: 11; } .col-11--md-mid.grid { --grid-columns: 11; } .start-11--md-mid { grid-column-start: 11; } .col-12--md-mid { --column-size: 12; } .col-12--md-mid > *, .col-12--md-mid::before, .col-12--md-mid::after { --container-columns: 12; } .col-12--md-mid.grid { --grid-columns: 12; } .start-12--md-mid { grid-column-start: 12; } .ml-0--md-mid { --offset-left-size: 0; } .ml-0--md-mid * { --offset-left-size: 0; } .mr-0--md-mid { --offset-right-size: 0; } .mr-0--md-mid * { --offset-right-size: 0; } .ml-1--md-mid { --offset-left-size: 1; } .ml-1--md-mid * { --offset-left-size: 0; } .mr-1--md-mid { --offset-right-size: 1; } .mr-1--md-mid * { --offset-right-size: 0; } .ml-2--md-mid { --offset-left-size: 2; } .ml-2--md-mid * { --offset-left-size: 0; } .mr-2--md-mid { --offset-right-size: 2; } .mr-2--md-mid * { --offset-right-size: 0; } .ml-3--md-mid { --offset-left-size: 3; } .ml-3--md-mid * { --offset-left-size: 0; } .mr-3--md-mid { --offset-right-size: 3; } .mr-3--md-mid * { --offset-right-size: 0; } .ml-4--md-mid { --offset-left-size: 4; } .ml-4--md-mid * { --offset-left-size: 0; } .mr-4--md-mid { --offset-right-size: 4; } .mr-4--md-mid * { --offset-right-size: 0; } .ml-5--md-mid { --offset-left-size: 5; } .ml-5--md-mid * { --offset-left-size: 0; } .mr-5--md-mid { --offset-right-size: 5; } .mr-5--md-mid * { --offset-right-size: 0; } .ml-6--md-mid { --offset-left-size: 6; } .ml-6--md-mid * { --offset-left-size: 0; } .mr-6--md-mid { --offset-right-size: 6; } .mr-6--md-mid * { --offset-right-size: 0; } .ml-7--md-mid { --offset-left-size: 7; } .ml-7--md-mid * { --offset-left-size: 0; } .mr-7--md-mid { --offset-right-size: 7; } .mr-7--md-mid * { --offset-right-size: 0; } .ml-8--md-mid { --offset-left-size: 8; } .ml-8--md-mid * { --offset-left-size: 0; } .mr-8--md-mid { --offset-right-size: 8; } .mr-8--md-mid * { --offset-right-size: 0; } .ml-9--md-mid { --offset-left-size: 9; } .ml-9--md-mid * { --offset-left-size: 0; } .mr-9--md-mid { --offset-right-size: 9; } .mr-9--md-mid * { --offset-right-size: 0; } .ml-10--md-mid { --offset-left-size: 10; } .ml-10--md-mid * { --offset-left-size: 0; } .mr-10--md-mid { --offset-right-size: 10; } .mr-10--md-mid * { --offset-right-size: 0; } .ml-11--md-mid { --offset-left-size: 11; } .ml-11--md-mid * { --offset-left-size: 0; } .mr-11--md-mid { --offset-right-size: 11; } .mr-11--md-mid * { --offset-right-size: 0; } .ml-12--md-mid { --offset-left-size: 12; } .ml-12--md-mid * { --offset-left-size: 0; } .mr-12--md-mid { --offset-right-size: 12; } .mr-12--md-mid * { --offset-right-size: 0; } } @media screen and ( min-width: 85.375em ) { .col-auto--lg { --width: 0 0 auto; --min-width: auto; } .col-flow--lg { --width: 1 1 0%; --min-width: auto; } .col-demi--lg { --column-size: calc(var(--container-columns) * 0.5); } .col-third--key { --column-size: calc(var(--container-columns) / 3); } .col-full--lg { --column-size: var(--container-columns); } .col-1--lg { --column-size: 1; } .col-1--lg > *, .col-1--lg::before, .col-1--lg::after { --container-columns: 1; } .col-1--lg.grid { --grid-columns: 1; } .start-1--lg { grid-column-start: 1; } .col-2--lg { --column-size: 2; } .col-2--lg > *, .col-2--lg::before, .col-2--lg::after { --container-columns: 2; } .col-2--lg.grid { --grid-columns: 2; } .start-2--lg { grid-column-start: 2; } .col-3--lg { --column-size: 3; } .col-3--lg > *, .col-3--lg::before, .col-3--lg::after { --container-columns: 3; } .col-3--lg.grid { --grid-columns: 3; } .start-3--lg { grid-column-start: 3; } .col-4--lg { --column-size: 4; } .col-4--lg > *, .col-4--lg::before, .col-4--lg::after { --container-columns: 4; } .col-4--lg.grid { --grid-columns: 4; } .start-4--lg { grid-column-start: 4; } .col-5--lg { --column-size: 5; } .col-5--lg > *, .col-5--lg::before, .col-5--lg::after { --container-columns: 5; } .col-5--lg.grid { --grid-columns: 5; } .start-5--lg { grid-column-start: 5; } .col-6--lg { --column-size: 6; } .col-6--lg > *, .col-6--lg::before, .col-6--lg::after { --container-columns: 6; } .col-6--lg.grid { --grid-columns: 6; } .start-6--lg { grid-column-start: 6; } .col-7--lg { --column-size: 7; } .col-7--lg > *, .col-7--lg::before, .col-7--lg::after { --container-columns: 7; } .col-7--lg.grid { --grid-columns: 7; } .start-7--lg { grid-column-start: 7; } .col-8--lg { --column-size: 8; } .col-8--lg > *, .col-8--lg::before, .col-8--lg::after { --container-columns: 8; } .col-8--lg.grid { --grid-columns: 8; } .start-8--lg { grid-column-start: 8; } .col-9--lg { --column-size: 9; } .col-9--lg > *, .col-9--lg::before, .col-9--lg::after { --container-columns: 9; } .col-9--lg.grid { --grid-columns: 9; } .start-9--lg { grid-column-start: 9; } .col-10--lg { --column-size: 10; } .col-10--lg > *, .col-10--lg::before, .col-10--lg::after { --container-columns: 10; } .col-10--lg.grid { --grid-columns: 10; } .start-10--lg { grid-column-start: 10; } .col-11--lg { --column-size: 11; } .col-11--lg > *, .col-11--lg::before, .col-11--lg::after { --container-columns: 11; } .col-11--lg.grid { --grid-columns: 11; } .start-11--lg { grid-column-start: 11; } .col-12--lg { --column-size: 12; } .col-12--lg > *, .col-12--lg::before, .col-12--lg::after { --container-columns: 12; } .col-12--lg.grid { --grid-columns: 12; } .start-12--lg { grid-column-start: 12; } .ml-0--lg { --offset-left-size: 0; } .ml-0--lg * { --offset-left-size: 0; } .mr-0--lg { --offset-right-size: 0; } .mr-0--lg * { --offset-right-size: 0; } .ml-1--lg { --offset-left-size: 1; } .ml-1--lg * { --offset-left-size: 0; } .mr-1--lg { --offset-right-size: 1; } .mr-1--lg * { --offset-right-size: 0; } .ml-2--lg { --offset-left-size: 2; } .ml-2--lg * { --offset-left-size: 0; } .mr-2--lg { --offset-right-size: 2; } .mr-2--lg * { --offset-right-size: 0; } .ml-3--lg { --offset-left-size: 3; } .ml-3--lg * { --offset-left-size: 0; } .mr-3--lg { --offset-right-size: 3; } .mr-3--lg * { --offset-right-size: 0; } .ml-4--lg { --offset-left-size: 4; } .ml-4--lg * { --offset-left-size: 0; } .mr-4--lg { --offset-right-size: 4; } .mr-4--lg * { --offset-right-size: 0; } .ml-5--lg { --offset-left-size: 5; } .ml-5--lg * { --offset-left-size: 0; } .mr-5--lg { --offset-right-size: 5; } .mr-5--lg * { --offset-right-size: 0; } .ml-6--lg { --offset-left-size: 6; } .ml-6--lg * { --offset-left-size: 0; } .mr-6--lg { --offset-right-size: 6; } .mr-6--lg * { --offset-right-size: 0; } .ml-7--lg { --offset-left-size: 7; } .ml-7--lg * { --offset-left-size: 0; } .mr-7--lg { --offset-right-size: 7; } .mr-7--lg * { --offset-right-size: 0; } .ml-8--lg { --offset-left-size: 8; } .ml-8--lg * { --offset-left-size: 0; } .mr-8--lg { --offset-right-size: 8; } .mr-8--lg * { --offset-right-size: 0; } .ml-9--lg { --offset-left-size: 9; } .ml-9--lg * { --offset-left-size: 0; } .mr-9--lg { --offset-right-size: 9; } .mr-9--lg * { --offset-right-size: 0; } .ml-10--lg { --offset-left-size: 10; } .ml-10--lg * { --offset-left-size: 0; } .mr-10--lg { --offset-right-size: 10; } .mr-10--lg * { --offset-right-size: 0; } .ml-11--lg { --offset-left-size: 11; } .ml-11--lg * { --offset-left-size: 0; } .mr-11--lg { --offset-right-size: 11; } .mr-11--lg * { --offset-right-size: 0; } .ml-12--lg { --offset-left-size: 12; } .ml-12--lg * { --offset-left-size: 0; } .mr-12--lg { --offset-right-size: 12; } .mr-12--lg * { --offset-right-size: 0; } } @media screen and ( min-width: 90em ) { .col-auto--lg-mid { --width: 0 0 auto; --min-width: auto; } .col-flow--lg-mid { --width: 1 1 0%; --min-width: auto; } .col-demi--lg-mid { --column-size: calc(var(--container-columns) * 0.5); } .col-third--key { --column-size: calc(var(--container-columns) / 3); } .col-full--lg-mid { --column-size: var(--container-columns); } .col-1--lg-mid { --column-size: 1; } .col-1--lg-mid > *, .col-1--lg-mid::before, .col-1--lg-mid::after { --container-columns: 1; } .col-1--lg-mid.grid { --grid-columns: 1; } .start-1--lg-mid { grid-column-start: 1; } .col-2--lg-mid { --column-size: 2; } .col-2--lg-mid > *, .col-2--lg-mid::before, .col-2--lg-mid::after { --container-columns: 2; } .col-2--lg-mid.grid { --grid-columns: 2; } .start-2--lg-mid { grid-column-start: 2; } .col-3--lg-mid { --column-size: 3; } .col-3--lg-mid > *, .col-3--lg-mid::before, .col-3--lg-mid::after { --container-columns: 3; } .col-3--lg-mid.grid { --grid-columns: 3; } .start-3--lg-mid { grid-column-start: 3; } .col-4--lg-mid { --column-size: 4; } .col-4--lg-mid > *, .col-4--lg-mid::before, .col-4--lg-mid::after { --container-columns: 4; } .col-4--lg-mid.grid { --grid-columns: 4; } .start-4--lg-mid { grid-column-start: 4; } .col-5--lg-mid { --column-size: 5; } .col-5--lg-mid > *, .col-5--lg-mid::before, .col-5--lg-mid::after { --container-columns: 5; } .col-5--lg-mid.grid { --grid-columns: 5; } .start-5--lg-mid { grid-column-start: 5; } .col-6--lg-mid { --column-size: 6; } .col-6--lg-mid > *, .col-6--lg-mid::before, .col-6--lg-mid::after { --container-columns: 6; } .col-6--lg-mid.grid { --grid-columns: 6; } .start-6--lg-mid { grid-column-start: 6; } .col-7--lg-mid { --column-size: 7; } .col-7--lg-mid > *, .col-7--lg-mid::before, .col-7--lg-mid::after { --container-columns: 7; } .col-7--lg-mid.grid { --grid-columns: 7; } .start-7--lg-mid { grid-column-start: 7; } .col-8--lg-mid { --column-size: 8; } .col-8--lg-mid > *, .col-8--lg-mid::before, .col-8--lg-mid::after { --container-columns: 8; } .col-8--lg-mid.grid { --grid-columns: 8; } .start-8--lg-mid { grid-column-start: 8; } .col-9--lg-mid { --column-size: 9; } .col-9--lg-mid > *, .col-9--lg-mid::before, .col-9--lg-mid::after { --container-columns: 9; } .col-9--lg-mid.grid { --grid-columns: 9; } .start-9--lg-mid { grid-column-start: 9; } .col-10--lg-mid { --column-size: 10; } .col-10--lg-mid > *, .col-10--lg-mid::before, .col-10--lg-mid::after { --container-columns: 10; } .col-10--lg-mid.grid { --grid-columns: 10; } .start-10--lg-mid { grid-column-start: 10; } .col-11--lg-mid { --column-size: 11; } .col-11--lg-mid > *, .col-11--lg-mid::before, .col-11--lg-mid::after { --container-columns: 11; } .col-11--lg-mid.grid { --grid-columns: 11; } .start-11--lg-mid { grid-column-start: 11; } .col-12--lg-mid { --column-size: 12; } .col-12--lg-mid > *, .col-12--lg-mid::before, .col-12--lg-mid::after { --container-columns: 12; } .col-12--lg-mid.grid { --grid-columns: 12; } .start-12--lg-mid { grid-column-start: 12; } .ml-0--lg-mid { --offset-left-size: 0; } .ml-0--lg-mid * { --offset-left-size: 0; } .mr-0--lg-mid { --offset-right-size: 0; } .mr-0--lg-mid * { --offset-right-size: 0; } .ml-1--lg-mid { --offset-left-size: 1; } .ml-1--lg-mid * { --offset-left-size: 0; } .mr-1--lg-mid { --offset-right-size: 1; } .mr-1--lg-mid * { --offset-right-size: 0; } .ml-2--lg-mid { --offset-left-size: 2; } .ml-2--lg-mid * { --offset-left-size: 0; } .mr-2--lg-mid { --offset-right-size: 2; } .mr-2--lg-mid * { --offset-right-size: 0; } .ml-3--lg-mid { --offset-left-size: 3; } .ml-3--lg-mid * { --offset-left-size: 0; } .mr-3--lg-mid { --offset-right-size: 3; } .mr-3--lg-mid * { --offset-right-size: 0; } .ml-4--lg-mid { --offset-left-size: 4; } .ml-4--lg-mid * { --offset-left-size: 0; } .mr-4--lg-mid { --offset-right-size: 4; } .mr-4--lg-mid * { --offset-right-size: 0; } .ml-5--lg-mid { --offset-left-size: 5; } .ml-5--lg-mid * { --offset-left-size: 0; } .mr-5--lg-mid { --offset-right-size: 5; } .mr-5--lg-mid * { --offset-right-size: 0; } .ml-6--lg-mid { --offset-left-size: 6; } .ml-6--lg-mid * { --offset-left-size: 0; } .mr-6--lg-mid { --offset-right-size: 6; } .mr-6--lg-mid * { --offset-right-size: 0; } .ml-7--lg-mid { --offset-left-size: 7; } .ml-7--lg-mid * { --offset-left-size: 0; } .mr-7--lg-mid { --offset-right-size: 7; } .mr-7--lg-mid * { --offset-right-size: 0; } .ml-8--lg-mid { --offset-left-size: 8; } .ml-8--lg-mid * { --offset-left-size: 0; } .mr-8--lg-mid { --offset-right-size: 8; } .mr-8--lg-mid * { --offset-right-size: 0; } .ml-9--lg-mid { --offset-left-size: 9; } .ml-9--lg-mid * { --offset-left-size: 0; } .mr-9--lg-mid { --offset-right-size: 9; } .mr-9--lg-mid * { --offset-right-size: 0; } .ml-10--lg-mid { --offset-left-size: 10; } .ml-10--lg-mid * { --offset-left-size: 0; } .mr-10--lg-mid { --offset-right-size: 10; } .mr-10--lg-mid * { --offset-right-size: 0; } .ml-11--lg-mid { --offset-left-size: 11; } .ml-11--lg-mid * { --offset-left-size: 0; } .mr-11--lg-mid { --offset-right-size: 11; } .mr-11--lg-mid * { --offset-right-size: 0; } .ml-12--lg-mid { --offset-left-size: 12; } .ml-12--lg-mid * { --offset-left-size: 0; } .mr-12--lg-mid { --offset-right-size: 12; } .mr-12--lg-mid * { --offset-right-size: 0; } } @media screen and ( min-width: 96em ) { .col-auto--xl { --width: 0 0 auto; --min-width: auto; } .col-flow--xl { --width: 1 1 0%; --min-width: auto; } .col-demi--xl { --column-size: calc(var(--container-columns) * 0.5); } .col-third--key { --column-size: calc(var(--container-columns) / 3); } .col-full--xl { --column-size: var(--container-columns); } .col-1--xl { --column-size: 1; } .col-1--xl > *, .col-1--xl::before, .col-1--xl::after { --container-columns: 1; } .col-1--xl.grid { --grid-columns: 1; } .start-1--xl { grid-column-start: 1; } .col-2--xl { --column-size: 2; } .col-2--xl > *, .col-2--xl::before, .col-2--xl::after { --container-columns: 2; } .col-2--xl.grid { --grid-columns: 2; } .start-2--xl { grid-column-start: 2; } .col-3--xl { --column-size: 3; } .col-3--xl > *, .col-3--xl::before, .col-3--xl::after { --container-columns: 3; } .col-3--xl.grid { --grid-columns: 3; } .start-3--xl { grid-column-start: 3; } .col-4--xl { --column-size: 4; } .col-4--xl > *, .col-4--xl::before, .col-4--xl::after { --container-columns: 4; } .col-4--xl.grid { --grid-columns: 4; } .start-4--xl { grid-column-start: 4; } .col-5--xl { --column-size: 5; } .col-5--xl > *, .col-5--xl::before, .col-5--xl::after { --container-columns: 5; } .col-5--xl.grid { --grid-columns: 5; } .start-5--xl { grid-column-start: 5; } .col-6--xl { --column-size: 6; } .col-6--xl > *, .col-6--xl::before, .col-6--xl::after { --container-columns: 6; } .col-6--xl.grid { --grid-columns: 6; } .start-6--xl { grid-column-start: 6; } .col-7--xl { --column-size: 7; } .col-7--xl > *, .col-7--xl::before, .col-7--xl::after { --container-columns: 7; } .col-7--xl.grid { --grid-columns: 7; } .start-7--xl { grid-column-start: 7; } .col-8--xl { --column-size: 8; } .col-8--xl > *, .col-8--xl::before, .col-8--xl::after { --container-columns: 8; } .col-8--xl.grid { --grid-columns: 8; } .start-8--xl { grid-column-start: 8; } .col-9--xl { --column-size: 9; } .col-9--xl > *, .col-9--xl::before, .col-9--xl::after { --container-columns: 9; } .col-9--xl.grid { --grid-columns: 9; } .start-9--xl { grid-column-start: 9; } .col-10--xl { --column-size: 10; } .col-10--xl > *, .col-10--xl::before, .col-10--xl::after { --container-columns: 10; } .col-10--xl.grid { --grid-columns: 10; } .start-10--xl { grid-column-start: 10; } .col-11--xl { --column-size: 11; } .col-11--xl > *, .col-11--xl::before, .col-11--xl::after { --container-columns: 11; } .col-11--xl.grid { --grid-columns: 11; } .start-11--xl { grid-column-start: 11; } .col-12--xl { --column-size: 12; } .col-12--xl > *, .col-12--xl::before, .col-12--xl::after { --container-columns: 12; } .col-12--xl.grid { --grid-columns: 12; } .start-12--xl { grid-column-start: 12; } .ml-0--xl { --offset-left-size: 0; } .ml-0--xl * { --offset-left-size: 0; } .mr-0--xl { --offset-right-size: 0; } .mr-0--xl * { --offset-right-size: 0; } .ml-1--xl { --offset-left-size: 1; } .ml-1--xl * { --offset-left-size: 0; } .mr-1--xl { --offset-right-size: 1; } .mr-1--xl * { --offset-right-size: 0; } .ml-2--xl { --offset-left-size: 2; } .ml-2--xl * { --offset-left-size: 0; } .mr-2--xl { --offset-right-size: 2; } .mr-2--xl * { --offset-right-size: 0; } .ml-3--xl { --offset-left-size: 3; } .ml-3--xl * { --offset-left-size: 0; } .mr-3--xl { --offset-right-size: 3; } .mr-3--xl * { --offset-right-size: 0; } .ml-4--xl { --offset-left-size: 4; } .ml-4--xl * { --offset-left-size: 0; } .mr-4--xl { --offset-right-size: 4; } .mr-4--xl * { --offset-right-size: 0; } .ml-5--xl { --offset-left-size: 5; } .ml-5--xl * { --offset-left-size: 0; } .mr-5--xl { --offset-right-size: 5; } .mr-5--xl * { --offset-right-size: 0; } .ml-6--xl { --offset-left-size: 6; } .ml-6--xl * { --offset-left-size: 0; } .mr-6--xl { --offset-right-size: 6; } .mr-6--xl * { --offset-right-size: 0; } .ml-7--xl { --offset-left-size: 7; } .ml-7--xl * { --offset-left-size: 0; } .mr-7--xl { --offset-right-size: 7; } .mr-7--xl * { --offset-right-size: 0; } .ml-8--xl { --offset-left-size: 8; } .ml-8--xl * { --offset-left-size: 0; } .mr-8--xl { --offset-right-size: 8; } .mr-8--xl * { --offset-right-size: 0; } .ml-9--xl { --offset-left-size: 9; } .ml-9--xl * { --offset-left-size: 0; } .mr-9--xl { --offset-right-size: 9; } .mr-9--xl * { --offset-right-size: 0; } .ml-10--xl { --offset-left-size: 10; } .ml-10--xl * { --offset-left-size: 0; } .mr-10--xl { --offset-right-size: 10; } .mr-10--xl * { --offset-right-size: 0; } .ml-11--xl { --offset-left-size: 11; } .ml-11--xl * { --offset-left-size: 0; } .mr-11--xl { --offset-right-size: 11; } .mr-11--xl * { --offset-right-size: 0; } .ml-12--xl { --offset-left-size: 12; } .ml-12--xl * { --offset-left-size: 0; } .mr-12--xl { --offset-right-size: 12; } .mr-12--xl * { --offset-right-size: 0; } } @media screen and ( min-width: 120em ) { .col-auto--xxl { --width: 0 0 auto; --min-width: auto; } .col-flow--xxl { --width: 1 1 0%; --min-width: auto; } .col-demi--xxl { --column-size: calc(var(--container-columns) * 0.5); } .col-third--key { --column-size: calc(var(--container-columns) / 3); } .col-full--xxl { --column-size: var(--container-columns); } .col-1--xxl { --column-size: 1; } .col-1--xxl > *, .col-1--xxl::before, .col-1--xxl::after { --container-columns: 1; } .col-1--xxl.grid { --grid-columns: 1; } .start-1--xxl { grid-column-start: 1; } .col-2--xxl { --column-size: 2; } .col-2--xxl > *, .col-2--xxl::before, .col-2--xxl::after { --container-columns: 2; } .col-2--xxl.grid { --grid-columns: 2; } .start-2--xxl { grid-column-start: 2; } .col-3--xxl { --column-size: 3; } .col-3--xxl > *, .col-3--xxl::before, .col-3--xxl::after { --container-columns: 3; } .col-3--xxl.grid { --grid-columns: 3; } .start-3--xxl { grid-column-start: 3; } .col-4--xxl { --column-size: 4; } .col-4--xxl > *, .col-4--xxl::before, .col-4--xxl::after { --container-columns: 4; } .col-4--xxl.grid { --grid-columns: 4; } .start-4--xxl { grid-column-start: 4; } .col-5--xxl { --column-size: 5; } .col-5--xxl > *, .col-5--xxl::before, .col-5--xxl::after { --container-columns: 5; } .col-5--xxl.grid { --grid-columns: 5; } .start-5--xxl { grid-column-start: 5; } .col-6--xxl { --column-size: 6; } .col-6--xxl > *, .col-6--xxl::before, .col-6--xxl::after { --container-columns: 6; } .col-6--xxl.grid { --grid-columns: 6; } .start-6--xxl { grid-column-start: 6; } .col-7--xxl { --column-size: 7; } .col-7--xxl > *, .col-7--xxl::before, .col-7--xxl::after { --container-columns: 7; } .col-7--xxl.grid { --grid-columns: 7; } .start-7--xxl { grid-column-start: 7; } .col-8--xxl { --column-size: 8; } .col-8--xxl > *, .col-8--xxl::before, .col-8--xxl::after { --container-columns: 8; } .col-8--xxl.grid { --grid-columns: 8; } .start-8--xxl { grid-column-start: 8; } .col-9--xxl { --column-size: 9; } .col-9--xxl > *, .col-9--xxl::before, .col-9--xxl::after { --container-columns: 9; } .col-9--xxl.grid { --grid-columns: 9; } .start-9--xxl { grid-column-start: 9; } .col-10--xxl { --column-size: 10; } .col-10--xxl > *, .col-10--xxl::before, .col-10--xxl::after { --container-columns: 10; } .col-10--xxl.grid { --grid-columns: 10; } .start-10--xxl { grid-column-start: 10; } .col-11--xxl { --column-size: 11; } .col-11--xxl > *, .col-11--xxl::before, .col-11--xxl::after { --container-columns: 11; } .col-11--xxl.grid { --grid-columns: 11; } .start-11--xxl { grid-column-start: 11; } .col-12--xxl { --column-size: 12; } .col-12--xxl > *, .col-12--xxl::before, .col-12--xxl::after { --container-columns: 12; } .col-12--xxl.grid { --grid-columns: 12; } .start-12--xxl { grid-column-start: 12; } .ml-0--xxl { --offset-left-size: 0; } .ml-0--xxl * { --offset-left-size: 0; } .mr-0--xxl { --offset-right-size: 0; } .mr-0--xxl * { --offset-right-size: 0; } .ml-1--xxl { --offset-left-size: 1; } .ml-1--xxl * { --offset-left-size: 0; } .mr-1--xxl { --offset-right-size: 1; } .mr-1--xxl * { --offset-right-size: 0; } .ml-2--xxl { --offset-left-size: 2; } .ml-2--xxl * { --offset-left-size: 0; } .mr-2--xxl { --offset-right-size: 2; } .mr-2--xxl * { --offset-right-size: 0; } .ml-3--xxl { --offset-left-size: 3; } .ml-3--xxl * { --offset-left-size: 0; } .mr-3--xxl { --offset-right-size: 3; } .mr-3--xxl * { --offset-right-size: 0; } .ml-4--xxl { --offset-left-size: 4; } .ml-4--xxl * { --offset-left-size: 0; } .mr-4--xxl { --offset-right-size: 4; } .mr-4--xxl * { --offset-right-size: 0; } .ml-5--xxl { --offset-left-size: 5; } .ml-5--xxl * { --offset-left-size: 0; } .mr-5--xxl { --offset-right-size: 5; } .mr-5--xxl * { --offset-right-size: 0; } .ml-6--xxl { --offset-left-size: 6; } .ml-6--xxl * { --offset-left-size: 0; } .mr-6--xxl { --offset-right-size: 6; } .mr-6--xxl * { --offset-right-size: 0; } .ml-7--xxl { --offset-left-size: 7; } .ml-7--xxl * { --offset-left-size: 0; } .mr-7--xxl { --offset-right-size: 7; } .mr-7--xxl * { --offset-right-size: 0; } .ml-8--xxl { --offset-left-size: 8; } .ml-8--xxl * { --offset-left-size: 0; } .mr-8--xxl { --offset-right-size: 8; } .mr-8--xxl * { --offset-right-size: 0; } .ml-9--xxl { --offset-left-size: 9; } .ml-9--xxl * { --offset-left-size: 0; } .mr-9--xxl { --offset-right-size: 9; } .mr-9--xxl * { --offset-right-size: 0; } .ml-10--xxl { --offset-left-size: 10; } .ml-10--xxl * { --offset-left-size: 0; } .mr-10--xxl { --offset-right-size: 10; } .mr-10--xxl * { --offset-right-size: 0; } .ml-11--xxl { --offset-left-size: 11; } .ml-11--xxl * { --offset-left-size: 0; } .mr-11--xxl { --offset-right-size: 11; } .mr-11--xxl * { --offset-right-size: 0; } .ml-12--xxl { --offset-left-size: 12; } .ml-12--xxl * { --offset-left-size: 0; } .mr-12--xxl { --offset-right-size: 12; } .mr-12--xxl * { --offset-right-size: 0; } } @media screen and ( min-width: 107.5em ) { .col-auto--max { --width: 0 0 auto; --min-width: auto; } .col-flow--max { --width: 1 1 0%; --min-width: auto; } .col-demi--max { --column-size: calc(var(--container-columns) * 0.5); } .col-third--key { --column-size: calc(var(--container-columns) / 3); } .col-full--max { --column-size: var(--container-columns); } .col-1--max { --column-size: 1; } .col-1--max > *, .col-1--max::before, .col-1--max::after { --container-columns: 1; } .col-1--max.grid { --grid-columns: 1; } .start-1--max { grid-column-start: 1; } .col-2--max { --column-size: 2; } .col-2--max > *, .col-2--max::before, .col-2--max::after { --container-columns: 2; } .col-2--max.grid { --grid-columns: 2; } .start-2--max { grid-column-start: 2; } .col-3--max { --column-size: 3; } .col-3--max > *, .col-3--max::before, .col-3--max::after { --container-columns: 3; } .col-3--max.grid { --grid-columns: 3; } .start-3--max { grid-column-start: 3; } .col-4--max { --column-size: 4; } .col-4--max > *, .col-4--max::before, .col-4--max::after { --container-columns: 4; } .col-4--max.grid { --grid-columns: 4; } .start-4--max { grid-column-start: 4; } .col-5--max { --column-size: 5; } .col-5--max > *, .col-5--max::before, .col-5--max::after { --container-columns: 5; } .col-5--max.grid { --grid-columns: 5; } .start-5--max { grid-column-start: 5; } .col-6--max { --column-size: 6; } .col-6--max > *, .col-6--max::before, .col-6--max::after { --container-columns: 6; } .col-6--max.grid { --grid-columns: 6; } .start-6--max { grid-column-start: 6; } .col-7--max { --column-size: 7; } .col-7--max > *, .col-7--max::before, .col-7--max::after { --container-columns: 7; } .col-7--max.grid { --grid-columns: 7; } .start-7--max { grid-column-start: 7; } .col-8--max { --column-size: 8; } .col-8--max > *, .col-8--max::before, .col-8--max::after { --container-columns: 8; } .col-8--max.grid { --grid-columns: 8; } .start-8--max { grid-column-start: 8; } .col-9--max { --column-size: 9; } .col-9--max > *, .col-9--max::before, .col-9--max::after { --container-columns: 9; } .col-9--max.grid { --grid-columns: 9; } .start-9--max { grid-column-start: 9; } .col-10--max { --column-size: 10; } .col-10--max > *, .col-10--max::before, .col-10--max::after { --container-columns: 10; } .col-10--max.grid { --grid-columns: 10; } .start-10--max { grid-column-start: 10; } .col-11--max { --column-size: 11; } .col-11--max > *, .col-11--max::before, .col-11--max::after { --container-columns: 11; } .col-11--max.grid { --grid-columns: 11; } .start-11--max { grid-column-start: 11; } .col-12--max { --column-size: 12; } .col-12--max > *, .col-12--max::before, .col-12--max::after { --container-columns: 12; } .col-12--max.grid { --grid-columns: 12; } .start-12--max { grid-column-start: 12; } .ml-0--max { --offset-left-size: 0; } .ml-0--max * { --offset-left-size: 0; } .mr-0--max { --offset-right-size: 0; } .mr-0--max * { --offset-right-size: 0; } .ml-1--max { --offset-left-size: 1; } .ml-1--max * { --offset-left-size: 0; } .mr-1--max { --offset-right-size: 1; } .mr-1--max * { --offset-right-size: 0; } .ml-2--max { --offset-left-size: 2; } .ml-2--max * { --offset-left-size: 0; } .mr-2--max { --offset-right-size: 2; } .mr-2--max * { --offset-right-size: 0; } .ml-3--max { --offset-left-size: 3; } .ml-3--max * { --offset-left-size: 0; } .mr-3--max { --offset-right-size: 3; } .mr-3--max * { --offset-right-size: 0; } .ml-4--max { --offset-left-size: 4; } .ml-4--max * { --offset-left-size: 0; } .mr-4--max { --offset-right-size: 4; } .mr-4--max * { --offset-right-size: 0; } .ml-5--max { --offset-left-size: 5; } .ml-5--max * { --offset-left-size: 0; } .mr-5--max { --offset-right-size: 5; } .mr-5--max * { --offset-right-size: 0; } .ml-6--max { --offset-left-size: 6; } .ml-6--max * { --offset-left-size: 0; } .mr-6--max { --offset-right-size: 6; } .mr-6--max * { --offset-right-size: 0; } .ml-7--max { --offset-left-size: 7; } .ml-7--max * { --offset-left-size: 0; } .mr-7--max { --offset-right-size: 7; } .mr-7--max * { --offset-right-size: 0; } .ml-8--max { --offset-left-size: 8; } .ml-8--max * { --offset-left-size: 0; } .mr-8--max { --offset-right-size: 8; } .mr-8--max * { --offset-right-size: 0; } .ml-9--max { --offset-left-size: 9; } .ml-9--max * { --offset-left-size: 0; } .mr-9--max { --offset-right-size: 9; } .mr-9--max * { --offset-right-size: 0; } .ml-10--max { --offset-left-size: 10; } .ml-10--max * { --offset-left-size: 0; } .mr-10--max { --offset-right-size: 10; } .mr-10--max * { --offset-right-size: 0; } .ml-11--max { --offset-left-size: 11; } .ml-11--max * { --offset-left-size: 0; } .mr-11--max { --offset-right-size: 11; } .mr-11--max * { --offset-right-size: 0; } .ml-12--max { --offset-left-size: 12; } .ml-12--max * { --offset-left-size: 0; } .mr-12--max { --offset-right-size: 12; } .mr-12--max * { --offset-right-size: 0; } } .first { order: -1; } html { background: var(--background-color--medium); } html, body { overflow-x: hidden; } .page__wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: var(--header-height) auto 1fr auto; grid-template-areas: "header" "breadcrumb" "content" "footer"; max-width: 100vw; max-width: 100dvw; min-height: 100vh; min-height: 100dvh; position: relative; } .page__wrapper:has(.page__breadcrumb) { --content-padding-block: 0; } .page__header { grid-area: header; max-width: 100vw; max-width: 100dvw; } .page__breadcrumb { grid-area: breadcrumb; } .page__content { grid-area: content; padding-block-start: var(--content-padding-block); align-content: start; } .page__content, .page__content__article { display: grid; grid-template-columns: var(--grid-edge) minmax(0, 1fr) var(--grid-edge); width: 100%; max-width: var(--layout-max-width); margin: 0 auto; position: relative; } .page__content > *, .page__content__article > * { grid-column: 2/span 1; } .page__content__article { grid-column: 1/-1; } .page__footer { grid-area: footer; width: 100%; max-width: var(--layout-max-width); padding-inline: var(--grid-edge); margin: 0 auto; } .page__grid { display: grid; grid-template-columns: var(--grid-edge) minmax(0, 1fr) var(--grid-edge); width: 100vw; width: 100dvw; height: 100dvh; height: 100vh; max-width: var(--layout-max-width); pointer-events: none; position: fixed; top: 0; left: 50%; translate: -50% 0; } .page__grid .grid { grid-column: 2/span 1; width: 100%; height: 100%; } .page__grid .grid::after { content: " "; } img { display: block; width: 100%; -webkit-user-select: none; -moz-user-select: none; user-select: none; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .svg-defs, .svg-defs * { width: 0; height: 0; opacity: 0; position: absolute; pointer-events: none; } [data-flag=scroller] { display: block; height: 0.1rem; position: absolute; top: 100vh; top: 100dvh; translate: 0 0.1rem; } /* purgecss start ignore */ .accordion__overflow > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .block__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .block--rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .field__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .field__notification > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .notification__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .title { --title-size: 1.6rem; font-family: var(--title-font); font-size: var(--title-size); font-weight: var(--title-weight, 500); line-height: 1.2em; color: var(--title-color); } .accordion__overflow > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) strong, .block__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) strong, .block--rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) strong, .field__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) strong, .field__notification > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) strong, .notification__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) strong, .title strong { color: inherit; font-weight: 500; } .accordion__overflow > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) a, .block__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) a, .block--rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) a, .field__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) a, .field__notification > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) a, .notification__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) a, .title a { color: currentColor; } .accordion__overflow > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) mark, .block__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) mark, .block--rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) mark, .field__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) mark, .field__notification > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) mark, .notification__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) mark, .title mark { color: var(--yellow-700); } .title--thin { --title-weight: 400; } .title--medium, .accordion__overflow > :where(h4:not([class])), .block__rte > :where(h4:not([class])), .block--rte > :where(h4:not([class])), .field__rte > :where(h4:not([class])), .field__notification > :where(h4:not([class])), .notification__rte > :where(h4:not([class])), .accordion__overflow > :where(h5:not([class])), .block__rte > :where(h5:not([class])), .block--rte > :where(h5:not([class])), .field__rte > :where(h5:not([class])), .field__notification > :where(h5:not([class])), .notification__rte > :where(h5:not([class])), .accordion__overflow > :where(h6:not([class])), .block__rte > :where(h6:not([class])), .block--rte > :where(h6:not([class])), .field__rte > :where(h6:not([class])), .field__notification > :where(h6:not([class])), .notification__rte > :where(h6:not([class])) { --title-weight: 450; } .title--accent, .accordion__overflow > :where(h3:not([class])), .block__rte > :where(h3:not([class])), .block--rte > :where(h3:not([class])), .field__rte > :where(h3:not([class])), .field__notification > :where(h3:not([class])), .notification__rte > :where(h3:not([class])) { --title-color: var(--title-color--accent); } .title--xxl { --title-size: 4rem; } .title--xl, .accordion__overflow > :where(h1:not([class])), .block__rte > :where(h1:not([class])), .block--rte > :where(h1:not([class])), .field__rte > :where(h1:not([class])), .field__notification > :where(h1:not([class])), .notification__rte > :where(h1:not([class])) { --title-size: 4rem; } .title--lg { --title-size: 2.8rem; } .title--md { --title-size: 3.2rem; } .title--sm, .accordion__overflow > :where(h2:not([class])), .block__rte > :where(h2:not([class])), .block--rte > :where(h2:not([class])), .field__rte > :where(h2:not([class])), .field__notification > :where(h2:not([class])), .notification__rte > :where(h2:not([class])) { --title-size: 2.6rem; } .title--xs, .accordion__overflow > :where(h3:not([class])), .block__rte > :where(h3:not([class])), .block--rte > :where(h3:not([class])), .field__rte > :where(h3:not([class])), .field__notification > :where(h3:not([class])), .notification__rte > :where(h3:not([class])) { --title-size: 2.2rem; } .title--xxs, .accordion__overflow > :where(h4:not([class])), .block__rte > :where(h4:not([class])), .block--rte > :where(h4:not([class])), .field__rte > :where(h4:not([class])), .field__notification > :where(h4:not([class])), .notification__rte > :where(h4:not([class])) { --title-size: 1.8rem; } @media screen and ( min-width: 64em ) { .title--xxl { --title-size: 4.8rem; } .title--xl, .accordion__overflow > :where(h1:not([class])), .block__rte > :where(h1:not([class])), .block--rte > :where(h1:not([class])), .field__rte > :where(h1:not([class])), .field__notification > :where(h1:not([class])), .notification__rte > :where(h1:not([class])) { --title-size: 4rem; } .title--lg { --title-size: 3.6rem; } } @media screen and ( min-width: 80em ) { .title--xxl { --title-size: 6rem; } .title--xl, .accordion__overflow > :where(h1:not([class])), .block__rte > :where(h1:not([class])), .block--rte > :where(h1:not([class])), .field__rte > :where(h1:not([class])), .field__notification > :where(h1:not([class])), .notification__rte > :where(h1:not([class])) { --title-size: 5.2rem; } .title--lg { --title-size: 4.8rem; } .title--md { --title-size: 4rem; } .title--sm, .accordion__overflow > :where(h2:not([class])), .block__rte > :where(h2:not([class])), .block--rte > :where(h2:not([class])), .field__rte > :where(h2:not([class])), .field__notification > :where(h2:not([class])), .notification__rte > :where(h2:not([class])) { --title-size: 3.2rem; } .title--xs, .accordion__overflow > :where(h3:not([class])), .block__rte > :where(h3:not([class])), .block--rte > :where(h3:not([class])), .field__rte > :where(h3:not([class])), .field__notification > :where(h3:not([class])), .notification__rte > :where(h3:not([class])) { --title-size: 2.8rem; } .title--xxs, .accordion__overflow > :where(h4:not([class])), .block__rte > :where(h4:not([class])), .block--rte > :where(h4:not([class])), .field__rte > :where(h4:not([class])), .field__notification > :where(h4:not([class])), .notification__rte > :where(h4:not([class])) { --title-size: 2.2rem; } } .text--accent { font-weight: 450; } .text--accent-primary { --text-color: var(--yellow-700); } .text--accent-secondary { --text-color: var(--text-color--accent); } .text--accent-ternary { --text-color: var(--text-color--accent-light); } .button--icon:not(:has(i))::before, .button--accordion.button--info::after, .file-attachment a:not(:has(i))::before, .accordion__overflow :where(a:not(.button))[href*=http]::after, .block__rte :where(a:not(.button))[href*=http]::after, .block--rte :where(a:not(.button))[href*=http]::after, .field__rte :where(a:not(.button))[href*=http]::after, .field__notification :where(a:not(.button))[href*=http]::after, .notification__rte :where(a:not(.button))[href*=http]::after, .accordion__overflow :where(a:not(.button))[target]::after, .block__rte :where(a:not(.button))[target]::after, .block--rte :where(a:not(.button))[target]::after, .field__rte :where(a:not(.button))[target]::after, .field__notification :where(a:not(.button))[target]::after, .notification__rte :where(a:not(.button))[target]::after, [class^=ri-], [class*=ri-] { font-family: "remixicon" !important; font-style: normal; font-size: 1em; color: var(--icon-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .button--icon:not(:has(i))::before, .file-attachment a:not(:has(i))::before, [class^=ri-]::before, [class*=ri-]::before { display: inline-block; } .ri--xxl::before { scale: 1.75; } .ri--xl::before { scale: 1.5; } .ri--lg::before { scale: 1.375; } .ri--md::before { scale: 1.25; } .ri--default::before { scale: 1; } .ri--xs::before { scale: 0.825; } .ri--xxs::before { scale: 0.75; } .ri--xxxs::before { scale: 0.625; } .ri-arrow-up-circle-line:before { content: "\ea72"; } .ri-check-line:before { content: "\eb7b"; } .ri-alert-fill:before { content: "\ea20"; } .ri-error-warning-fill:before { content: "\eca0"; } .ri-arrow-up-s-line:before { content: "\ea78"; } .ri-arrow-down-s-line:before { content: "\ea4e"; } .ri-arrow-left-s-line:before { content: "\ea64"; } .ri-arrow-right-s-line:before { content: "\ea6e"; } .ri-arrow-drop-up-line:before { content: "\ea56"; } .ri-arrow-drop-right-line:before { content: "\ea54"; } .ri-arrow-drop-down-line:before { content: "\ea50"; } .ri-arrow-drop-left-line:before { content: "\ea52"; } .ri-file-upload-line:before { content: "\ed15"; } .ri-external-link-line:before { content: "\ecaf"; } .ri-phone-line:before { content: "\efec"; } .ri-arrow-up-line:before { content: "\ea76"; } .ri-arrow-down-line:before { content: "\ea4c"; } .ri-arrow-left-line:before { content: "\ea60"; } .ri-arrow-right-line:before, .button--icon:not(:has(i)):before, .file-attachment a:not(:has(i)):before { content: "\ea6c"; } .ri-information-2-fill:before { content: "\f448"; } .ri-close-circle-line:before { content: "\eb97"; } .ri-close-line:before { content: "\eb99"; } .ri-close-large-line:before { content: "\f4c8"; } .ri-youtube-fill:before { content: "\f2d4"; } .ri-play-fill:before { content: "\f00a"; } .ri-file-pdf-2-fill:before, .file-attachment a[href$=".pdf"]:before { content: "\f3c6"; } .ri-file-ppt-fill:before, .file-attachment a[href$=".ppt"]:before { content: "\ed00"; } .ri-file-word-fill:before, .file-attachment a[href$=".doc"]:before, .file-attachment a[href$=".docx"]:before { content: "\ed1c"; } .ri-file-excel-fill:before, .file-attachment a[href$=".xls"]:before, .file-attachment a[href$=".xlsx"]:before { content: "\ecde"; } .ri-mail-line:before { content: "\eef6"; } .ri-search-2-line:before { content: "\f0cd"; } .ri-information-2-line:before { content: "\f449"; } .ri-menu { position: relative; } .ri-menu, .ri-menu::before, .ri-menu::after { content: ""; display: block; height: 0.0625em; width: 1em; background: var(--icon-color); } .ri-menu::before, .ri-menu::after { position: absolute; top: 0; left: 0; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .ri-menu::before { translate: 0 -500%; } .ri-menu::after { translate: 0 500%; } /* purgecss start ignore */ .accordion__overflow, .block__rte, .block--rte, .field__rte, .field__notification, .notification__rte { --rte-text-color--accent: var(--text-color--accent); --rte-margin-block: 1em; --rte-mark-color: var(--yellow-700); inline-size: 100%; container-type: inline-size; container-name: rte; } .accordion__overflow > :where(p, a, li, strong, em, mark):empty, .block__rte > :where(p, a, li, strong, em, mark):empty, .block--rte > :where(p, a, li, strong, em, mark):empty, .field__rte > :where(p, a, li, strong, em, mark):empty, .field__notification > :where(p, a, li, strong, em, mark):empty, .notification__rte > :where(p, a, li, strong, em, mark):empty { display: none; } .accordion__overflow > :where(* + *), .block__rte > :where(* + *), .block--rte > :where(* + *), .field__rte > :where(* + *), .field__notification > :where(* + *), .notification__rte > :where(* + *) { margin-block-start: var(--rte-margin-block); } .accordion__overflow > :where(p + p), .block__rte > :where(p + p), .block--rte > :where(p + p), .field__rte > :where(p + p), .field__notification > :where(p + p), .notification__rte > :where(p + p) { --rte-margin-block: 0.75em; } .accordion__overflow > :where(* + blockquote), .block__rte > :where(* + blockquote), .block--rte > :where(* + blockquote), .field__rte > :where(* + blockquote), .field__notification > :where(* + blockquote), .notification__rte > :where(* + blockquote), .accordion__overflow > :where(* + blockquote) + *, .block__rte > :where(* + blockquote) + *, .block--rte > :where(* + blockquote) + *, .field__rte > :where(* + blockquote) + *, .field__notification > :where(* + blockquote) + *, .notification__rte > :where(* + blockquote) + * { --rte-margin-block: 5.6rem; } .accordion__overflow > :where(* + img:not([class]), * + figure:not([class])), .block__rte > :where(* + img:not([class]), * + figure:not([class])), .block--rte > :where(* + img:not([class]), * + figure:not([class])), .field__rte > :where(* + img:not([class]), * + figure:not([class])), .field__notification > :where(* + img:not([class]), * + figure:not([class])), .notification__rte > :where(* + img:not([class]), * + figure:not([class])), .accordion__overflow > :where(* + img:not([class]), * + figure:not([class])) + *, .block__rte > :where(* + img:not([class]), * + figure:not([class])) + *, .block--rte > :where(* + img:not([class]), * + figure:not([class])) + *, .field__rte > :where(* + img:not([class]), * + figure:not([class])) + *, .field__notification > :where(* + img:not([class]), * + figure:not([class])) + *, .notification__rte > :where(* + img:not([class]), * + figure:not([class])) + * { --rte-margin-block: 3.2rem; } .accordion__overflow > :where(* + .block), .block__rte > :where(* + .block), .block--rte > :where(* + .block), .field__rte > :where(* + .block), .field__notification > :where(* + .block), .notification__rte > :where(* + .block), .accordion__overflow > :where(* + .block) + *, .block__rte > :where(* + .block) + *, .block--rte > :where(* + .block) + *, .field__rte > :where(* + .block) + *, .field__notification > :where(* + .block) + *, .notification__rte > :where(* + .block) + * { --rte-margin-block: 3.2rem; } @media screen and ( min-width: 48em ) { .accordion__overflow > :where(* + .block), .block__rte > :where(* + .block), .block--rte > :where(* + .block), .field__rte > :where(* + .block), .field__notification > :where(* + .block), .notification__rte > :where(* + .block), .accordion__overflow > :where(* + .block) + *, .block__rte > :where(* + .block) + *, .block--rte > :where(* + .block) + *, .field__rte > :where(* + .block) + *, .field__notification > :where(* + .block) + *, .notification__rte > :where(* + .block) + * { --rte-margin-block: 4.8rem; } } .accordion__overflow > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .block__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .block--rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .field__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .field__notification > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .notification__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) { --rte-margin-block: max(1.5em, 4rem); } .accordion__overflow > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) + :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .block__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) + :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .block--rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) + :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .field__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) + :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .field__notification > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) + :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .notification__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) + :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) { --rte-margin-block: 0.5em; } .accordion__overflow > :where(h6:not([class])), .block__rte > :where(h6:not([class])), .block--rte > :where(h6:not([class])), .field__rte > :where(h6:not([class])), .field__notification > :where(h6:not([class])), .notification__rte > :where(h6:not([class])) { --title-size: 1.4rem; } .accordion__overflow :where(a:not(.button)), .block__rte :where(a:not(.button)), .block--rte :where(a:not(.button)), .field__rte :where(a:not(.button)), .field__notification :where(a:not(.button)), .notification__rte :where(a:not(.button)) { --text-color: var(--rte-text-color--accent); --icon-color: var(--text-color); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.1rem; text-decoration-color: currentColor; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (hover: hover) { .accordion__overflow :where(a:not(.button)):hover, .block__rte :where(a:not(.button)):hover, .block--rte :where(a:not(.button)):hover, .field__rte :where(a:not(.button)):hover, .field__notification :where(a:not(.button)):hover, .notification__rte :where(a:not(.button)):hover { text-underline-offset: 0.4em; } } .accordion__overflow :where(a:not(.button))[href*=http], .block__rte :where(a:not(.button))[href*=http], .block--rte :where(a:not(.button))[href*=http], .field__rte :where(a:not(.button))[href*=http], .field__notification :where(a:not(.button))[href*=http], .notification__rte :where(a:not(.button))[href*=http], .accordion__overflow :where(a:not(.button))[target], .block__rte :where(a:not(.button))[target], .block--rte :where(a:not(.button))[target], .field__rte :where(a:not(.button))[target], .field__notification :where(a:not(.button))[target], .notification__rte :where(a:not(.button))[target] { padding-inline-end: 1.5em; } .accordion__overflow :where(a:not(.button))[href*=http]::after, .block__rte :where(a:not(.button))[href*=http]::after, .block--rte :where(a:not(.button))[href*=http]::after, .field__rte :where(a:not(.button))[href*=http]::after, .field__notification :where(a:not(.button))[href*=http]::after, .notification__rte :where(a:not(.button))[href*=http]::after, .accordion__overflow :where(a:not(.button))[target]::after, .block__rte :where(a:not(.button))[target]::after, .block--rte :where(a:not(.button))[target]::after, .field__rte :where(a:not(.button))[target]::after, .field__notification :where(a:not(.button))[target]::after, .notification__rte :where(a:not(.button))[target]::after { content: "\ecaf"; position: absolute; translate: 30% -10%; } .accordion__overflow > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong, .block__rte > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong, .block--rte > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong, .field__rte > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong, .field__notification > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong, .notification__rte > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong { --text-color: var(--text-color--accent); } :is(.block--blue, .notification--default, .nofitication--blue) .accordion__overflow > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong, :is(.block--blue, .notification--default, .nofitication--blue) .block__rte > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong, :is(.block--blue, .notification--default, .nofitication--blue) .block--rte > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong, :is(.block--blue, .notification--default, .nofitication--blue) .field__rte > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong, :is(.block--blue, .notification--default, .nofitication--blue) .field__notification > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong, :is(.block--blue, .notification--default, .nofitication--blue) .notification__rte > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong { --text-color: var(--text-color--bright); } .accordion__overflow > :where([class*=block--columns], *:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) mark, .block__rte > :where([class*=block--columns], *:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) mark, .block--rte > :where([class*=block--columns], *:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) mark, .field__rte > :where([class*=block--columns], *:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) mark, .field__notification > :where([class*=block--columns], *:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) mark, .notification__rte > :where([class*=block--columns], *:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) mark { background-color: hsl(from var(--yellow-500) h 100% 75%); } .accordion__overflow :where(blockquote:not([class])), .block__rte :where(blockquote:not([class])), .block--rte :where(blockquote:not([class])), .field__rte :where(blockquote:not([class])), .field__notification :where(blockquote:not([class])), .notification__rte :where(blockquote:not([class])) { width: 100%; padding-block: 3em; margin-inline: auto; border-block: 0.1rem solid var(--stroke-color); text-align: center; font-style: italic; font-size: 1.25em; line-height: 1.5em; font-weight: 300; } @media screen and ( min-width: 64em ) { .accordion__overflow :where(blockquote:not([class])), .block__rte :where(blockquote:not([class])), .block--rte :where(blockquote:not([class])), .field__rte :where(blockquote:not([class])), .field__notification :where(blockquote:not([class])), .notification__rte :where(blockquote:not([class])) { font-size: 1.5em; padding-inline: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 1 + var(--grid-gap) * (1 - var(--minus-gap)) + var(--grid-offset, 0%)); } } .accordion__overflow :where(blockquote:not([class])) cite, .block__rte :where(blockquote:not([class])) cite, .block--rte :where(blockquote:not([class])) cite, .field__rte :where(blockquote:not([class])) cite, .field__notification :where(blockquote:not([class])) cite, .notification__rte :where(blockquote:not([class])) cite { --text-color: var(--text-color--accent-medium); display: block; padding-block-start: 1em; font-weight: 450; color: var(--text-color--accent); } @media screen and ( min-width: 64em ) { .accordion__overflow :where(blockquote:not([class])) cite, .block__rte :where(blockquote:not([class])) cite, .block--rte :where(blockquote:not([class])) cite, .field__rte :where(blockquote:not([class])) cite, .field__notification :where(blockquote:not([class])) cite, .notification__rte :where(blockquote:not([class])) cite { font-size: 1.25em; } } .accordion__overflow :where(blockquote:not([class])) cite::before, .block__rte :where(blockquote:not([class])) cite::before, .block--rte :where(blockquote:not([class])) cite::before, .field__rte :where(blockquote:not([class])) cite::before, .field__notification :where(blockquote:not([class])) cite::before, .notification__rte :where(blockquote:not([class])) cite::before { content: "― "; } .accordion__overflow > :where(ul:not([class]), ol:not([class])), .block__rte > :where(ul:not([class]), ol:not([class])), .block--rte > :where(ul:not([class]), ol:not([class])), .field__rte > :where(ul:not([class]), ol:not([class])), .field__notification > :where(ul:not([class]), ol:not([class])), .notification__rte > :where(ul:not([class]), ol:not([class])), .accordion__overflow > :where(ul:not([class]), ol:not([class])) ul, .block__rte > :where(ul:not([class]), ol:not([class])) ul, .block--rte > :where(ul:not([class]), ol:not([class])) ul, .field__rte > :where(ul:not([class]), ol:not([class])) ul, .field__notification > :where(ul:not([class]), ol:not([class])) ul, .notification__rte > :where(ul:not([class]), ol:not([class])) ul, .accordion__overflow > :where(ul:not([class]), ol:not([class])) ol, .block__rte > :where(ul:not([class]), ol:not([class])) ol, .block--rte > :where(ul:not([class]), ol:not([class])) ol, .field__rte > :where(ul:not([class]), ol:not([class])) ol, .field__notification > :where(ul:not([class]), ol:not([class])) ol, .notification__rte > :where(ul:not([class]), ol:not([class])) ol { display: flex; flex-direction: column; gap: 0.5em var(--grid-gap); } .accordion__overflow > :where(ul:not([class]), ol:not([class])) ul, .block__rte > :where(ul:not([class]), ol:not([class])) ul, .block--rte > :where(ul:not([class]), ol:not([class])) ul, .field__rte > :where(ul:not([class]), ol:not([class])) ul, .field__notification > :where(ul:not([class]), ol:not([class])) ul, .notification__rte > :where(ul:not([class]), ol:not([class])) ul, .accordion__overflow > :where(ul:not([class]), ol:not([class])) ol, .block__rte > :where(ul:not([class]), ol:not([class])) ol, .block--rte > :where(ul:not([class]), ol:not([class])) ol, .field__rte > :where(ul:not([class]), ol:not([class])) ol, .field__notification > :where(ul:not([class]), ol:not([class])) ol, .notification__rte > :where(ul:not([class]), ol:not([class])) ol { padding-block: 1em; } .accordion__overflow > :where(ul:not([class]), ol:not([class])) ul, .block__rte > :where(ul:not([class]), ol:not([class])) ul, .block--rte > :where(ul:not([class]), ol:not([class])) ul, .field__rte > :where(ul:not([class]), ol:not([class])) ul, .field__notification > :where(ul:not([class]), ol:not([class])) ul, .notification__rte > :where(ul:not([class]), ol:not([class])) ul { --rte-mark-color: var(--blue-800); } .accordion__overflow > :where(ul:not([class]), ol:not([class])) ul ul, .block__rte > :where(ul:not([class]), ol:not([class])) ul ul, .block--rte > :where(ul:not([class]), ol:not([class])) ul ul, .field__rte > :where(ul:not([class]), ol:not([class])) ul ul, .field__notification > :where(ul:not([class]), ol:not([class])) ul ul, .notification__rte > :where(ul:not([class]), ol:not([class])) ul ul { --rte-mark-color: var(--blue-200); } .accordion__overflow > :where(ul:not([class]), ol:not([class])) li, .block__rte > :where(ul:not([class]), ol:not([class])) li, .block--rte > :where(ul:not([class]), ol:not([class])) li, .field__rte > :where(ul:not([class]), ol:not([class])) li, .field__notification > :where(ul:not([class]), ol:not([class])) li, .notification__rte > :where(ul:not([class]), ol:not([class])) li { padding-inline-start: 2.5em; position: relative; } .accordion__overflow > :where(ul:not([class]), ol:not([class])) li::before, .block__rte > :where(ul:not([class]), ol:not([class])) li::before, .block--rte > :where(ul:not([class]), ol:not([class])) li::before, .field__rte > :where(ul:not([class]), ol:not([class])) li::before, .field__notification > :where(ul:not([class]), ol:not([class])) li::before, .notification__rte > :where(ul:not([class]), ol:not([class])) li::before { color: var(--rte-mark-color); font-weight: 500; position: absolute; } .accordion__overflow > :where(ul:not([class]), ol:not([class])):is(ul) > li::before, .block__rte > :where(ul:not([class]), ol:not([class])):is(ul) > li::before, .block--rte > :where(ul:not([class]), ol:not([class])):is(ul) > li::before, .field__rte > :where(ul:not([class]), ol:not([class])):is(ul) > li::before, .field__notification > :where(ul:not([class]), ol:not([class])):is(ul) > li::before, .notification__rte > :where(ul:not([class]), ol:not([class])):is(ul) > li::before, .accordion__overflow > :where(ul:not([class]), ol:not([class])) ul > li::before, .block__rte > :where(ul:not([class]), ol:not([class])) ul > li::before, .block--rte > :where(ul:not([class]), ol:not([class])) ul > li::before, .field__rte > :where(ul:not([class]), ol:not([class])) ul > li::before, .field__notification > :where(ul:not([class]), ol:not([class])) ul > li::before, .notification__rte > :where(ul:not([class]), ol:not([class])) ul > li::before { content: ""; width: 0.5em; height: 0.1875em; border-radius: 10rem; background: currentColor; translate: calc(-100% - 1.5em) -50%; top: 0.5lh; } .accordion__overflow > :where(ul:not([class]), ol:not([class])):is(ol) > li, .block__rte > :where(ul:not([class]), ol:not([class])):is(ol) > li, .block--rte > :where(ul:not([class]), ol:not([class])):is(ol) > li, .field__rte > :where(ul:not([class]), ol:not([class])):is(ol) > li, .field__notification > :where(ul:not([class]), ol:not([class])):is(ol) > li, .notification__rte > :where(ul:not([class]), ol:not([class])):is(ol) > li, .accordion__overflow > :where(ul:not([class]), ol:not([class])) ol > li, .block__rte > :where(ul:not([class]), ol:not([class])) ol > li, .block--rte > :where(ul:not([class]), ol:not([class])) ol > li, .field__rte > :where(ul:not([class]), ol:not([class])) ol > li, .field__notification > :where(ul:not([class]), ol:not([class])) ol > li, .notification__rte > :where(ul:not([class]), ol:not([class])) ol > li { counter-increment: index; } .accordion__overflow > :where(ul:not([class]), ol:not([class])):is(ol) > li::before, .block__rte > :where(ul:not([class]), ol:not([class])):is(ol) > li::before, .block--rte > :where(ul:not([class]), ol:not([class])):is(ol) > li::before, .field__rte > :where(ul:not([class]), ol:not([class])):is(ol) > li::before, .field__notification > :where(ul:not([class]), ol:not([class])):is(ol) > li::before, .notification__rte > :where(ul:not([class]), ol:not([class])):is(ol) > li::before, .accordion__overflow > :where(ul:not([class]), ol:not([class])) ol > li::before, .block__rte > :where(ul:not([class]), ol:not([class])) ol > li::before, .block--rte > :where(ul:not([class]), ol:not([class])) ol > li::before, .field__rte > :where(ul:not([class]), ol:not([class])) ol > li::before, .field__notification > :where(ul:not([class]), ol:not([class])) ol > li::before, .notification__rte > :where(ul:not([class]), ol:not([class])) ol > li::before { content: counter(index) "."; translate: calc(-100% - 1.1em) 0; } .accordion__overflow > :where(ul:not([class]), ol:not([class])) ol li::before, .block__rte > :where(ul:not([class]), ol:not([class])) ol li::before, .block--rte > :where(ul:not([class]), ol:not([class])) ol li::before, .field__rte > :where(ul:not([class]), ol:not([class])) ol li::before, .field__notification > :where(ul:not([class]), ol:not([class])) ol li::before, .notification__rte > :where(ul:not([class]), ol:not([class])) ol li::before { content: counters(index, ".", decimal) "."; } .accordion__overflow > :where(ol:not([class])), .block__rte > :where(ol:not([class])), .block--rte > :where(ol:not([class])), .field__rte > :where(ol:not([class])), .field__notification > :where(ol:not([class])), .notification__rte > :where(ol:not([class])), .accordion__overflow > :where(ol:not([class])) ol, .block__rte > :where(ol:not([class])) ol, .block--rte > :where(ol:not([class])) ol, .field__rte > :where(ol:not([class])) ol, .field__notification > :where(ol:not([class])) ol, .notification__rte > :where(ol:not([class])) ol { counter-reset: index; } .accordion__overflow > :where(img:not(.block)), .block__rte > :where(img:not(.block)), .block--rte > :where(img:not(.block)), .field__rte > :where(img:not(.block)), .field__notification > :where(img:not(.block)), .notification__rte > :where(img:not(.block)), .accordion__overflow > :where(figure:not(.block)) img, .block__rte > :where(figure:not(.block)) img, .block--rte > :where(figure:not(.block)) img, .field__rte > :where(figure:not(.block)) img, .field__notification > :where(figure:not(.block)) img, .notification__rte > :where(figure:not(.block)) img { border-radius: var(--radius--default); } .accordion__overflow > :where(figure:not(.block)) figcaption, .block__rte > :where(figure:not(.block)) figcaption, .block--rte > :where(figure:not(.block)) figcaption, .field__rte > :where(figure:not(.block)) figcaption, .field__notification > :where(figure:not(.block)) figcaption, .notification__rte > :where(figure:not(.block)) figcaption { padding-block-start: 1em; padding-inline: calc(var(--radius--default) * 0.5); } .accordion__overflow > :where(img:not(.block), figure:not(.block), .block--images), .block__rte > :where(img:not(.block), figure:not(.block), .block--images), .block--rte > :where(img:not(.block), figure:not(.block), .block--images), .field__rte > :where(img:not(.block), figure:not(.block), .block--images), .field__notification > :where(img:not(.block), figure:not(.block), .block--images), .notification__rte > :where(img:not(.block), figure:not(.block), .block--images) { position: relative; left: 50%; translate: -50% 0; } @media screen and ( max-width: 47.9375em ) { .accordion__overflow > .block--default .block__list.flex--grid, .block__rte > .block--default .block__list.flex--grid, .block--rte > .block--default .block__list.flex--grid, .field__rte > .block--default .block__list.flex--grid, .field__notification > .block--default .block__list.flex--grid, .notification__rte > .block--default .block__list.flex--grid { row-gap: 1.5em; } } @container rte (width < 40rem) { .accordion__overflow > :where(figure:not(.block)) figcaption, .block__rte > :where(figure:not(.block)) figcaption, .block--rte > :where(figure:not(.block)) figcaption, .field__rte > :where(figure:not(.block)) figcaption, .field__notification > :where(figure:not(.block)) figcaption, .notification__rte > :where(figure:not(.block)) figcaption, .accordion__overflow .block--images figcaption, .block__rte .block--images figcaption, .block--rte .block--images figcaption, .field__rte .block--images figcaption, .field__notification .block--images figcaption, .notification__rte .block--images figcaption { font-size: 1.4rem; } } @container rte (width < 76.8rem) { .accordion__overflow .block--columns-2, .block__rte .block--columns-2, .block--rte .block--columns-2, .field__rte .block--columns-2, .field__notification .block--columns-2, .notification__rte .block--columns-2 { -moz-columns: unset; columns: unset; } .accordion__overflow .block--columns-2 > *, .block__rte .block--columns-2 > *, .block--rte .block--columns-2 > *, .field__rte .block--columns-2 > *, .field__notification .block--columns-2 > *, .notification__rte .block--columns-2 > * { --rte-margin-block: 0.75em; margin-block-start: var(--rte-margin-block); } } .button, .file-attachment a { --button-background: var(--button-primary, black); --button-background-hover: var(--button-ternary, grey); --button-color: var(--button-secondary, white); --button-stroke: var(--button-primary, black); --button-base-height: var(--cta-height); --button-padding-block: 0.6rem; --button-padding-inline: 1.25em; --icon-color: var(--button-color); --icon-background: transparent; display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 1em; min-height: var(--button-base-height); padding-inline: var(--button-padding-inline); padding-block: calc(var(--button-padding-block) * 1.4) calc(var(--button-padding-block)); outline: 0.1rem solid var(--button-stroke); outline-offset: -0.05rem; background: var(--button-background); border-radius: 100rem; cursor: pointer; font-size: 1.6rem; line-height: 1.2em; font-weight: 400; color: var(--button-color); -webkit-user-select: none; -moz-user-select: none; user-select: none; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .button[data-mce-selected], .file-attachment a[data-mce-selected] { margin: 0 !important; padding-inline: var(--button-padding-inline) !important; padding-block: calc(var(--button-padding-block) * 1.4) calc(var(--button-padding-block)) !important; background: var(--button-background) !important; border-radius: 100rem !important; box-shadow: none !important; color: var(--button-color) !important; } .button > *, .file-attachment a > * { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .button:not(.button--disabled):hover, .file-attachment a:not(.button--disabled):hover { --button-stroke: var(--button-background-hover); background: var(--button-background-hover); } .button [class*=ri], .file-attachment a [class*=ri] { translate: 0 -0.1em; } .button:not(.button--texted) [class*=ri], .file-attachment a:not(.button--texted) [class*=ri] { pointer-events: none; } .button--primary, :where(.block--grey) .button--default, :where(.block--blue, [class*=notification--]) .button--default, .button--blue { --button-primary: var(--blue-800); --button-secondary: var(--white); --button-ternary: var(--blue-200); } :where(.block--blue, [class*=notification--]) .button--primary:not(.button--texted, .button--icon, .button--outline), :where(.block--blue, [class*=notification--]) .button--default:not(.button--texted, .button--icon, .button--outline), :where(.block--blue, [class*=notification--]) .button--blue:not(.button--texted, .button--icon, .button--outline) { --button-background: var(--button-secondary); --button-color: var(--button-primary); --button-stroke: var(--button-secondary); } .button--secondary, :where(.block--yellow) .button--default, .button--yellow { --button-primary: var(--yellow-500); --button-secondary: var(--yellow-800); --button-ternary: var(--yellow-300); } .button--secondary.button--icon, .file-attachment a.button--secondary, :where(.block--yellow) .button--icon.button--default, :where(.block--yellow) .file-attachment a.button--default, .file-attachment :where(.block--yellow) a.button--default, .button--yellow.button--icon, .file-attachment a.button--yellow { --button-color: var(--button-secondary); } .block--yellow .button--secondary:not(.button--texted, .button--icon, .button--outline), .block--yellow .button--default:not(.button--texted, .button--icon, .button--outline), .block--yellow .button--yellow:not(.button--texted, .button--icon, .button--outline) { --button-primary: var(--yellow-700); --button-secondary: var(--white); --button-background-hover: var(--yellow-800); } .button--accepted { --button-primary: var(--green-600); --button-secondary: var(--white); --button-ternary: var(--green-800); } .button--refused { --button-primary: var(--red-600); --button-secondary: var(--white); --button-ternary: var(--red-700); } .button--grey, .button--disabled, .js-slideshow[data-slideshow=default].first [data-action="-1"], .js-slideshow[data-slideshow=default].last [data-action="1"], .js-slideshow[data-slideshow=rte].first [data-action="-1"], .js-slideshow[data-slideshow=rte].last [data-action="1"], .button[disabled], .file-attachment a[disabled] { --button-primary: var(--grey-150); --button-secondary: var(--grey-800); --button-ternary: var(--grey-150); } .button--grey.button--outline:not(.button--rounded), .button--disabled.button--outline:not(.button--rounded), .js-slideshow[data-slideshow=default].first .button--outline[data-action="-1"]:not(.button--rounded), .js-slideshow[data-slideshow=default].last .button--outline[data-action="1"]:not(.button--rounded), .js-slideshow[data-slideshow=rte].first .button--outline[data-action="-1"]:not(.button--rounded), .js-slideshow[data-slideshow=rte].last .button--outline[data-action="1"]:not(.button--rounded), .button[disabled].button--outline:not(.button--rounded), .file-attachment a[disabled].button--outline:not(.button--rounded) { --button-color: var(--button-secondary); } .button--disabled, .js-slideshow[data-slideshow=default].first [data-action="-1"], .js-slideshow[data-slideshow=default].last [data-action="1"], .js-slideshow[data-slideshow=rte].first [data-action="-1"], .js-slideshow[data-slideshow=rte].last [data-action="1"], .button[disabled], .file-attachment a[disabled] { cursor: default; pointer-events: none; } :where(.block--yellow) .button--default.button--texted { --button-color: var(--yellow-800); } :where(.block--yellow) .button--default.button--outline:not(:hover) { --button-stroke: var(--yellow-800); } .button--inverted [class*=ri-] { order: -1; } .button--outline { --button-background: transparent; --button-color: var(--button-primary); } .block--blue .button--outline { --button-stroke: var(--button-secondary); --button-color: var(--button-secondary); } .block--blue .button--outline:hover { --button-stroke: var(--button-background-hover); } .block--blue .button--outline.button--secondary:not(:hover), .block--blue :where(.block--yellow) .button--outline.button--default:not(:hover), :where(.block--yellow) .block--blue .button--outline.button--default:not(:hover) { --button-color: var(--button-primary); --button-stroke: var(--button-primary); } .button--outline:where(.button--secondary, :where(.block--yellow) .button--default, .button--grey) { --button-color: var(--button-secondary); } .button--outline:where(.button--accepted) { --button-background-hover: var(--button-primary); } @media (hover: hover) { .button--outline:where(.button--accepted):hover { --button-color: var(--button-secondary); } } .button--outline:where(.button--refused) { --button-color: var(--button-secondary); --button-background-hover: var(--button-primary); } .button--outline:where(.button--refused):not(:hover) { --button-primary: var(--grey-150); --button-secondary: var(--grey-400); --button-ternary: var(--grey-150); } .button--active { pointer-events: none; } .button--texted { --button-primary: transparent; --button-secondary: var(--grey-800); --button-ternary: transparent; padding-inline: 0; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 0.1rem; text-decoration-color: transparent; } @media (hover: hover) { .button--texted:hover { text-decoration-color: currentColor; } } .button--texted.button--primary, :where(.block--blue, [class*=notification--]) .button--texted.button--default, :where(.block--grey) .button--texted.button--default { --button-secondary: var(--blue-800); } .block--blue .button--texted.button--default, .block--blue .button--texted.button--primary { --button-secondary: var(--white); } .block--blue .button--texted.button--secondary, .block--blue :where(.block--yellow) .button--texted.button--default, :where(.block--yellow) .block--blue .button--texted.button--default { --button-secondary: var(--yellow-500); } .button--texted.button--secondary, :where(.block--yellow) .button--texted.button--default { --button-secondary: var(--yellow-700); } .button--texted span i[class*=ri] { margin-inline-start: 0.5ch; } .button--icon, .file-attachment a { --button-color: var(--button-primary); --button-base-height: 4rem; --button-padding-inline: 1.7857142857em; --icon-color: var(--button-secondary); --icon-background: var(--button-primary); padding-inline-start: calc(var(--button-base-height) + var(--button-padding-inline) * 0.75); padding-block-start: calc(var(--button-padding-block) * 1.5 - 0.1rem); background: transparent; font-size: 1.4rem; line-height: 1.6rem; font-weight: 450; text-transform: uppercase; letter-spacing: 0.05em; position: relative; } .button--icon[data-mce-selected], .file-attachment a[data-mce-selected] { padding-inline-start: calc(var(--button-base-height) + var(--button-padding-inline) * 0.75) !important; padding-block-start: calc(var(--button-padding-block) * 1.5 - 0.1rem) !important; } .button--icon [class*=ri-], .file-attachment a [class*=ri-] { display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; height: 100%; background: var(--icon-background); border-radius: 100rem; position: absolute; top: 50%; left: -0.1rem; translate: 0 -50%; } .button--icon:not(:has(i))::before, .file-attachment a:not(:has(i))::before { display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; height: 100%; background: var(--icon-background); border-radius: 100rem; font-size: 1.25em; position: absolute; top: 50%; left: -0.1rem; translate: 0 -50%; scale: 1; } @media (hover: hover) { .button--icon:hover, .file-attachment a:hover { outline-color: var(--button-background-hover); } } .block--blue .button--icon, .block--blue .file-attachment a, .file-attachment .block--blue a { --button-background: transparent; --button-color: var(--button-secondary); --button-stroke: var(--button-secondary); --icon-color: var(--button-primary); --icon-background: var(--button-secondary); } .block--blue .button--icon.button--secondary, .block--blue .file-attachment a.button--secondary, .file-attachment .block--blue a.button--secondary, .block--blue :where(.block--yellow) .button--icon.button--default, .block--blue :where(.block--yellow) .file-attachment a.button--default, .file-attachment .block--blue :where(.block--yellow) a.button--default, :where(.block--yellow) .block--blue .button--icon.button--default, :where(.block--yellow) .block--blue .file-attachment a.button--default, .file-attachment :where(.block--yellow) .block--blue a.button--default { --button-background-hover: var(--button-primary); --button-color: var(--button-primary); --button-stroke: var(--button-primary) !important; --icon-background: var(--button-primary); --icon-color: var(--button-secondary); } @media (hover: hover) { .block--blue .button--icon.button--secondary:hover, .block--blue .file-attachment a.button--secondary:hover, .file-attachment .block--blue a.button--secondary:hover, .block--blue :where(.block--yellow) .button--icon.button--default:hover, .block--blue :where(.block--yellow) .file-attachment a.button--default:hover, .file-attachment .block--blue :where(.block--yellow) a.button--default:hover, :where(.block--yellow) .block--blue .button--icon.button--default:hover, :where(.block--yellow) .block--blue .file-attachment a.button--default:hover, .file-attachment :where(.block--yellow) .block--blue a.button--default:hover { --button-background-hover: var(--button-ternary); --button-color: var(--button-secondary); } } .button--icon:where(.button--disabled, .js-slideshow[data-slideshow=default].first [data-action="-1"], .js-slideshow[data-slideshow=default].last [data-action="1"], .js-slideshow[data-slideshow=rte].first [data-action="-1"], .js-slideshow[data-slideshow=rte].last [data-action="1"]), .file-attachment a:where(.button--disabled, .js-slideshow[data-slideshow=default].first [data-action="-1"], .js-slideshow[data-slideshow=default].last [data-action="1"], .js-slideshow[data-slideshow=rte].first [data-action="-1"], .js-slideshow[data-slideshow=rte].last [data-action="1"]) { --button-color: var(--button-secondary); } .button--shrink { --button-base-height: 3.2rem; --button-padding-block: 0.4rem; } .button--accordion { --button-base-height: 4rem; min-width: var(--button-base-height); height: var(--button-base-height); padding: 0; padding-block-start: 0.2em; gap: 0; font-size: 1.5rem; text-decoration: none; } .button--accordion.button--secondary:is(.button--outline), :where(.block--yellow) .button--accordion.button--default:is(.button--outline) { --button-color: var(--yellow-700) !important; } .button--accordion [class*=ri-] { display: flex; justify-content: center; width: var(--button-base-height); } .button--accordion.button--texted { margin-inline-start: -0.5em; } .button--accordion .button__content { display: grid; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .button--accordion .button__content > * { grid-row: 1/-1; } .button--accordion .button__overflow { width: 100%; grid-column: 1/-1; overflow: hidden; } .button--accordion .button__overflow span { display: block; white-space: nowrap; color: var(--button-color); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 0.1rem; text-decoration-color: transparent; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .button--accordion .button__overflow > *:last-child { padding-inline-end: var(--button-padding-inline); } .button--accordion:not(:hover) .button__content { grid-template-columns: var(--accordion-based-height, 0fr) 0fr; opacity: 0; pointer-events: none; } .button--accordion:hover.button--outline, .button--accordion.button--opened.button--outline { --button-background-hover: transparent; --button-stroke: var(--button-primary); --button-color: var(--button-primary); } .button--accordion:hover .button__content, .button--accordion.button--opened .button__content { opacity: 1; grid-template-columns: var(--accordion-based-height, 0fr) 1fr; } @media screen and ( max-width: 63.9375em ) { .button--accordion.button--outline { --button-background-hover: transparent; --button-stroke: var(--button-primary); --button-color: var(--button-primary); } .button--accordion .button__content { opacity: 1 !important; grid-template-columns: var(--accordion-based-height, 0fr) 1fr !important; pointer-events: auto !important; } } @media (hover: hover) { .button--accordion:hover ~ .button--accordion .button__content { opacity: 0; grid-template-columns: var(--accordion-based-height, 0fr) 0fr; } .button--accordion:hover.button--texted span { text-decoration-color: currentColor; } } .button--accordion:has(~ .button:hover, ~ .file-attachment a:hover) .button__content { opacity: 0; grid-template-columns: var(--accordion-based-height, 0fr) 0fr; } .button--accordion.button--info { position: relative; } .button--accordion.button--info::after { content: "\f448"; aspect-ratio: 1/1; width: 1em; height: 1em; border-radius: 10rem; background: var(--card-background, var(--block-background, var(--background-color))); font-size: 0.85em; line-height: 1em; color: var(--button-primary); position: absolute; top: 0; right: 0; } .block--blue .button--accordion.button--info.button--primary::after, .block--blue .button--accordion.button--info.button--default::after { color: var(--button-secondary); } .button--deep-accordion * { pointer-events: none; } .button--deep-accordion .button__content { display: grid; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .button--deep-accordion .button__content > * { grid-row: 1/-1; } .button--deep-accordion .button__content--1 { grid-template-columns: 0fr 1fr; } .button--deep-accordion .button__content--2 { grid-template-columns: 0fr 0fr; } .button--deep-accordion .button__overflow { width: 100%; grid-column: 1/-1; overflow: hidden; } .button--deep-accordion .button__overflow span { display: block; white-space: nowrap; color: var(--button-color); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .button--rounded { --button-base-height: 4rem; width: var(--button-base-height); height: var(--button-base-height); justify-content: center; } .button--rounded.button--outline { outline-width: 0.2rem; } .button--rounded [class*=ri-] { translate: 0.025em -0.05em; pointer-events: none; } .file-attachment p + p { margin-block-start: 1em; } .file-attachment a { --icon-color: var(--white); text-decoration: none; } @media (hover: hover) { .file-attachment a:hover { --button-color: var(--white) !important; } .file-attachment a:hover::before { background: oklch(from var(--button-background-hover) calc(l - 0.2) c h); } } .file-attachment a::after { display: none; } .file-attachment a::before { font-size: 1.4em !important; } .file-attachment a[data-mce-selected] { --button-color: var(--white) !important; } .file-attachment a[data-mce-selected]::before { background: oklch(from var(--button-background-hover) calc(l - 0.2) c h); } .file-attachment a[href$=".pdf"] { --button-primary: #B80000; --button-background-hover: #B80000; } .file-attachment a[href$=".doc"], .file-attachment a[href$=".docx"] { --button-primary: #1A5CBD; --button-background-hover: #1A5CBD; } .file-attachment a[href$=".xls"], .file-attachment a[href$=".xlsx"] { --button-primary: #107C41; --button-background-hover: #107C41; } .file-attachment a[href$=".ppt"] { --button-primary: #D35230; --button-background-hover: #D35230; } .tag { --tag-background: var(--tag-primary, black); --tag-color: var(--tag-secondary, white); --tag-base-height: 3rem; --tag-stroke: var(--tag-primary, black); display: inline-block; min-height: var(--tag-base-height); padding-inline: 1em; padding-block: 0.6em 0.4em; outline: 0.1rem solid var(--tag-stroke); outline-offset: -0.1rem; background: var(--tag-background); border-radius: 100rem; -webkit-user-select: none; -moz-user-select: none; user-select: none; font-size: 1.4rem; line-height: 1em; color: var(--tag-color); } .tag--default, .tag--yellow { --tag-primary: var(--yellow-500); --tag-secondary: var(--yellow-800); } .tag--secondary, .tag--blue { --tag-primary: var(--blue-800); --tag-secondary: var(--white); } .tag--outline { --tag-background: transparent; } .block--blue .tag--outline.tag--default, .block--blue .tag--outline.tag--yellow { --tag-secondary: var(--tag-primary); } .block--blue .tag--outline.tag--secondary, .block--blue .tag--outline.tag--blue { --tag-primary: var(--white); --tag-secondary: var(--tag-primary); } .block--yellow .tag--outline { --tag-primary: var(--yellow-800); --tag-secondary: var(--yellow-800); } .block--grey .tag--outline.tag--default, .block--grey .tag--outline.tag--yellow { --tag-primary: var(--yellow-700); --tag-secondary: var(--yellow-700); } .block--grey .tag--outline.tag--secondary, .block--grey .tag--outline.tag--blue { --tag-primary: var(--blue-800); --tag-secondary: var(--blue-800); } .notification { --notification-primary: var(--black, black); --notification-secondary: var(--white, white); --notification-background: var(--notification-primary); --title-color: var(--notification-secondary); --text-color: var(--notification-secondary); --icon-color: var(--notification-secondary); display: flex; padding-block: 2em; gap: var(--grid-gap); position: relative; z-index: 2; } .notification + .notification { margin-block-start: 2em; } @media screen and ( max-width: 39.9375em ) { .notification:not([class*=col-])::before, .notification.col-grow::before, .notification.col-12::before { width: 100vw; width: 100dvw; border-radius: 0; } } .notification::before { content: ""; display: block; width: calc(100% + var(--grid-gap) * 2); height: 100%; background: var(--notification-background); border-radius: var(--radius--default); position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: -1; } .notification--default, .notification--blue { --notification-primary: var(--blue-800); --selection-background: var(--blue-100); } .notification--default .notification__rte a:not([class]), .notification--blue .notification__rte a:not([class]) { --text-color: var(--text-color--accent-light); --icon-color: var(--text-color); } .notification--alert, .notification--red { --notification-primary: var(--red-600); } .notification--warning, .notification--orange { --notification-primary: var(--orange-600); } .notification--success, .notification--green { --notification-primary: var(--green-600); } .notification:not(.notification--default, .notification--blue) { --selection-color: hsl(from var(--notification-primary) h s 25% / 100%); --selection-background: hsl( from var(--notification-primary) h s 85% / 100% ); } .notification--shrink { padding-block: 1.5em; } .notification--centered { justify-self: center; margin-inline: auto; } .notification__content { display: flex; flex-direction: column; gap: 1em; width: 100%; } .notification__title + .notification__rte { margin-block-start: -0.5em; } .notification__buttons { display: flex; flex-wrap: wrap; gap: 1.5em; } .notification__icon { order: -1; font-size: 3em; align-self: center; } .form.flex--row { row-gap: 2em; } @media screen and ( min-width: 40.0625em ) { .form.flex--row { row-gap: 3em; } } .form__section { align-items: flex-start; gap: 1.5em var(--grid-gap); } .form--shrink .field__list { row-gap: 2em; } .form .notification.first { margin-block-end: 2em; } .field { --field-base-height: 6rem; --field-color: var(--text-color); --field-background: transparent; --field-stroke: var(--stroke-color--default); --field-padding: 1em; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); grid-template-areas: "label" "notification" "input" "message"; align-items: start; position: relative; } .field:where(:not(.field--alert, .field--warning, .field--success)) .field__input:focus, .field:where(:not(.field--alert, .field--warning, .field--success)) .select__button:focus { --field-stroke: var(--stroke-color--accent); } .field:where(.field--checkbox, .field--radio) + .field--submit { margin-block-start: -1em; } .field .field__notification { margin-block: 0.5em; } .field--search { grid-template-columns: 1fr auto; grid-template-rows: auto; grid-template-areas: "input label"; align-items: center; } .field--search:has(*:focus) .field__input, .field--search:has(*:focus) .select__button { opacity: 1; pointer-events: auto; } .field--search:has(*:focus) .field__label { pointer-events: none; } .field--search:has(*:focus) .field__label span { opacity: 0; } .field--search:has(*:focus) [class*=ri-] { translate: -1em -0.1em; } .field--search .field__input, .field--search .select__button { grid-column: 1/-1; padding-inline-end: 4em; opacity: 0; pointer-events: none; } .field--search .field__label { --text-color: var(--text-color--accent); font-size: 1.8rem; font-weight: 400; } .field--search .field__label span { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .field--checkbox .field__label, .field--radio .field__label { padding-inline-start: 0; } .field--select { z-index: 4; } .field--code { --field-stroke: var(--stroke-color--accent); grid-template-columns: minmax(12rem, auto) 1fr; grid-template-rows: auto var(--field-base-height) auto; grid-template-areas: "label label" "code input" "message message"; } .field--code::before { grid-row: 2/span 1; grid-column: 1/-1; content: ""; display: block; width: 100%; height: 100%; border: 0.1rem solid var(--field-stroke); border-radius: var(--radius--default); pointer-events: none; } .field--code::after { grid-row: 2/span 1; grid-column: 1/span 1; content: ""; display: block; width: 100%; height: 100%; border-start-start-radius: var(--radius--default); border-end-start-radius: var(--radius--default); background: var(--field-stroke); } .field--code .field__input, .field--code .select__button { outline: 0; } @media screen and ( max-width: 39.9375em ) { .field--file { grid-template-columns: 1fr; grid-template-rows: repeat(5, auto); grid-template-areas: "label" "notification" "input" "information" "message"; } } @media screen and ( min-width: 40em ) { .field--file { grid-template-columns: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 6 + var(--grid-gap) * (6 - var(--minus-gap)) + var(--grid-offset, 0%)) 1fr; grid-template-areas: "label label" "notification notification" "input information" "message message"; } } @media screen and ( min-width: 64em ) { .field--file { grid-template-columns: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 5 + var(--grid-gap) * (5 - var(--minus-gap)) + var(--grid-offset, 0%)) 1fr; grid-template-areas: "label label" "notification notification" "input information" "message message"; } } @media screen and ( min-width: 80em ) { .field--file { grid-template-columns: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 4 + var(--grid-gap) * (4 - var(--minus-gap)) + var(--grid-offset, 0%)) 1fr; grid-template-areas: "label label" "notification notification" "input information" "message message"; } } .field--file .field__wrapper { display: flex; width: 100%; align-content: center; justify-items: center; aspect-ratio: var(--ratio--2x1); box-shadow: var(--shadow--default); border-radius: var(--radius--default); position: relative; } .field--file .field__wrapper p { --text-color: var(--text-color--accent); --icon-color: var(--text-color--accent); display: flex; flex-direction: column; align-items: center; gap: 1em; font-size: 1.4rem; line-height: 1.2em; text-align: center; position: relative; z-index: 3; } .field--file .field__wrapper p [class*=ri-] { order: -1; font-size: 2em; } .field--file .field__image { width: 100%; height: 100%; border-radius: var(--radius--default); filter: brightness(40%); position: absolute; top: 0; left: 0; z-index: 2; } .field--file .field__reset { flex: 0 0 auto; position: absolute; top: calc(var(--radius--default) * 0.5); right: calc(var(--radius--default) * 0.5); z-index: 5; } .field--file:has(.field__image) .field__wrapper p { --text-color: var(--text-color--bright); --icon-color: var(--text-color--bright); } .field:has(*[required]) .field__label::after { content: " *"; } .field:has(*[required]):not(:has(.field__label)) :is(.checkbox__label, .radio__label)::after { content: " *"; } .field__wrapper { grid-area: input; } .field__input, .select__button { grid-area: input; min-height: var(--field-base-height); outline: 0.1rem solid var(--field-stroke); outline-offset: -0.1rem; padding-inline: var(--field-padding); padding-block: 1.8rem; border-radius: var(--radius--default); background: var(--field-background); color: var(--field-color); line-height: 1.5em; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .field__input::-moz-placeholder, .select__button::-moz-placeholder { color: var(--text-color--lighter); font-style: italic; } .field__input::placeholder, .select__button::placeholder { color: var(--text-color--lighter); font-style: italic; } .field__input--file { width: 100%; height: 100%; opacity: 0; cursor: pointer; position: absolute; top: 0; left: 0; z-index: 4; } .field__label { grid-area: label; padding-inline: 0.5em; padding-block-end: 0.25em; font-weight: 450; color: var(--text-color--accent); } .field__label::after { color: var(--alert); } .field__message { grid-area: message; display: inline-flex; align-items: baseline; gap: 1em; padding-inline: 0.5em; margin-block-start: 0.75em; font-size: 1.4rem; font-weight: 450; line-height: 1.4em; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .field__message [class*=ri-] { order: -1; translate: 0 -0.1em; } .field__message--alert { --icon-color: var(--alert); color: var(--alert); } .field__message--warning { --icon-color: var(--warning); color: var(--warning); } .field__message--success { --icon-color: var(--success); color: var(--success); } .field__buttons { display: flex; flex-wrap: wrap; gap: 1em; } .field__code { grid-area: code; display: block; max-height: 100%; padding-inline-start: 1.5em; -o-object-fit: contain; object-fit: contain; -o-object-position: left; object-position: left; position: relative; z-index: 3; } .field__information { grid-area: information; align-self: center; padding-block: 1em; padding-inline: var(--grid-gap); font-size: 1.3rem; } .field__header { --grid-gap-block: 1em; } .field__notification { display: flex; gap: 2em 1em; align-items: baseline; } @media screen and ( max-width: 39.9375em ) { .field__notification { font-size: 1.4rem; } } @media screen and ( min-width: 40em ) { .field__notification { gap: 2em; } } .field__notification [class*=ri-] { --icon-color: var(--yellow-700); order: -1; margin: 0; } .field--alert { --field-stroke: var(--alert); --field-color: var(--alert); } .field--alert .field__input, .field--alert .select__button { outline-width: 0.2rem; } .field--warning { --field-stroke: var(--warning); --field-color: var(--warning); } .field--warning .field__input, .field--warning .select__button { outline-width: 0.2rem; } .field--success { --field-stroke: var(--success); --field-color: var(--success); } .field--success .field__input, .field--success .select__button { outline-width: 0.2rem; } .select { display: none; } .select__button { display: flex; justify-content: space-between; background: var(--background-color--bright); cursor: pointer; position: relative; z-index: 4; } .select__wrapper { --select-offset: 0.8rem; --select-option-height: 4rem; grid-area: input; width: calc(100% + var(--select-offset) * 2); max-height: calc(var(--field-base-height) + var(--select-offset) * 2 + var(--select-option-height) * 3.5); padding-block-start: calc(var(--field-base-height) + var(--select-offset)); background: var(--background-color--bright); border-radius: calc(var(--radius--default) + var(--select-offset)); box-shadow: var(--shadow--default); position: absolute; top: calc(var(--select-offset) * -1); left: calc(var(--select-offset) * -1); overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .select__list { padding-block: 0.5em; } .select__item { padding-inline: calc(var(--field-padding, 1em) + var(--select-offset)); padding-block: 0.5em; min-height: var(--select-option-height); cursor: pointer; color: var(--text-color--accent-light); position: relative; z-index: 2; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .select__item::before { content: ""; display: block; width: calc(100% - var(--select-offset) * 2); height: calc(100% - 0.4rem); background: var(--background-color--light); border-radius: var(--radius--default); opacity: 0; position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: -1; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .select__item.active { color: var(--text-color--accent); } @media (hover: hover) { .select__item:hover::before { opacity: 1; } } .checkbox, .radio { --field-stroke: var(--stroke-color--medium); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto; grid-template-areas: "input label"; align-items: baseline; gap: 1em; cursor: pointer; } .checkbox:has(*:checked), .radio:has(*:checked) { --field-stroke: var(--stroke-color--accent); } @media screen and ( max-width: 39.9375em ) { .checkbox__list.flex--row, .radio__list.flex--row { flex-direction: column; --grid-gap-block: 0; } } @media screen and ( min-width: 40em ) { .checkbox__list.flex--row, .radio__list.flex--row { --grid-gap: 3.5em; --grid-gap-block: 0.5em; } } .checkbox__input, .radio__input { grid-column: 1/-1; grid-row: 1/-1; display: block; width: 100%; height: 100%; } .checkbox__input:checked ~ :is(.checkbox__mark, .radio__mark)::after, .radio__input:checked ~ :is(.checkbox__mark, .radio__mark)::after { rotate: 45deg; scale: 1; } .checkbox__label, .radio__label { grid-area: label; padding-block: 0.25em; position: relative; z-index: 2; } .checkbox__label::after, .radio__label::after { color: var(--alert); } .checkbox__mark, .radio__mark { grid-area: input; display: block; width: 1.6rem; height: 1.6rem; border-radius: 0.3rem; outline: 0.1rem solid var(--field-stroke); outline-offset: -0.1rem; pointer-events: none; position: relative; translate: 0 0.15lh; } .checkbox__mark::after, .radio__mark::after { content: ""; display: block; width: 30%; height: 55%; border: 0.1rem solid var(--field-stroke); border-block-start: 0; border-inline-start: 0; position: absolute; top: 50%; left: 50%; translate: -50% -65%; rotate: 0; scale: 0; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .radio__mark { border-radius: 100rem; } .ratio--square { aspect-ratio: var(--ratio--square); } .ratio--2x1 { aspect-ratio: var(--ratio--2x1); } .ratio--3x2 { aspect-ratio: var(--ratio--3x2); } .ratio--5x3 { aspect-ratio: var(--ratio--5x3); } .ratio--7x3 { aspect-ratio: var(--ratio--7x3); } .ratio--16x9 { aspect-ratio: var(--ratio--16x9); } .ratio--21x9 { aspect-ratio: var(--ratio--21x9); } .header { display: flex; align-items: center; width: 100%; height: var(--header-height); align-items: center; justify-content: space-between; padding-inline: var(--grid-edge); position: fixed; top: 0; z-index: var(--z-index-header); } .header::before { content: ""; display: block; width: 100%; height: 300%; pointer-events: none; background: linear-gradient(to bottom, hsl(from var(--background-color) h s l/75%) 0%, hsl(from var(--background-color) h s l/74.025%) 8.1%, hsl(from var(--background-color) h s l/71.325%) 15.5%, hsl(from var(--background-color) h s l/67.2%) 22.5%, hsl(from var(--background-color) h s l/61.875%) 29%, hsl(from var(--background-color) h s l/55.575%) 35.3%, hsl(from var(--background-color) h s l/48.6%) 41.2%, hsl(from var(--background-color) h s l/41.25%) 47.1%, hsl(from var(--background-color) h s l/33.75%) 52.9%, hsl(from var(--background-color) h s l/26.4%) 58.8%, hsl(from var(--background-color) h s l/19.425%) 64.7%, hsl(from var(--background-color) h s l/13.125%) 71%, hsl(from var(--background-color) h s l/7.8%) 77.5%, hsl(from var(--background-color) h s l/3.675%) 84.5%, hsl(from var(--background-color) h s l/0.975%) 91.9%, hsl(from var(--background-color) h s l/0%) 100%); -webkit-mask-image: linear-gradient(to bottom, hsl(from black h s l/100%) 0%, hsl(from black h s l/98.7%) 8.1%, hsl(from black h s l/95.1%) 15.5%, hsl(from black h s l/89.6%) 22.5%, hsl(from black h s l/82.5%) 29%, hsl(from black h s l/74.1%) 35.3%, hsl(from black h s l/64.8%) 41.2%, hsl(from black h s l/55%) 47.1%, hsl(from black h s l/45%) 52.9%, hsl(from black h s l/35.2%) 58.8%, hsl(from black h s l/25.9%) 64.7%, hsl(from black h s l/17.5%) 71%, hsl(from black h s l/10.4%) 77.5%, hsl(from black h s l/4.9%) 84.5%, hsl(from black h s l/1.3%) 91.9%, hsl(from black h s l/0%) 100%); mask-image: linear-gradient(to bottom, hsl(from black h s l/100%) 0%, hsl(from black h s l/98.7%) 8.1%, hsl(from black h s l/95.1%) 15.5%, hsl(from black h s l/89.6%) 22.5%, hsl(from black h s l/82.5%) 29%, hsl(from black h s l/74.1%) 35.3%, hsl(from black h s l/64.8%) 41.2%, hsl(from black h s l/55%) 47.1%, hsl(from black h s l/45%) 52.9%, hsl(from black h s l/35.2%) 58.8%, hsl(from black h s l/25.9%) 64.7%, hsl(from black h s l/17.5%) 71%, hsl(from black h s l/10.4%) 77.5%, hsl(from black h s l/4.9%) 84.5%, hsl(from black h s l/1.3%) 91.9%, hsl(from black h s l/0%) 100%); backdrop-filter: blur(4px); opacity: 0; position: absolute; top: 0; left: 0; z-index: -1; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .header__logo { max-width: 20rem; } .header__button { align-self: center; flex-shrink: 0; position: relative; z-index: 3; } .header__nav { --header-nav-gap: 3.2rem; display: flex; flex: 1; justify-content: flex-end; align-items: center; gap: var(--header-nav-gap); } .header__nav .button { --button-base-height: 4.8rem; white-space: nowrap; } @media screen and ( min-width: 40em ) and ( max-width: 63.9375em ) { .header__nav { --header-nav-gap: 2.4rem; } } @media screen and ( max-width: 39.9375em ) { .header__nav:has(.header__search input:focus) .header__links--languages { opacity: 0; pointer-events: none; } } @media screen and ( min-width: 80em ) { .header__nav { --header-nav-gap: 4rem; } } @media screen and ( max-width: 39.9375em ) { .header__search { width: calc(100vw - var(--grid-edge) * 2 - 12.2rem - 1em) !important; flex: auto !important; min-width: auto !important; position: absolute; left: var(--grid-edge); z-index: 9; } .header__search:has(:focus) .field__label { --icon-color: var(--text-color--accent); } .header__search .field__input { font-size: 1.6rem !important; } .header__search .field__label span { display: none; } .header__search .field__label { --icon-color: var(--text-color--bright); } } .header__search .field__input { background: var(--background-color); } .header__search .field__label, .header__search .field__input { font-size: 1.8rem; } @media screen and ( min-width: 40em ) and ( max-width: 63.9375em ) { .header__search .field__label, .header__search .field__input { font-size: 1.4rem; } } @media screen and ( max-width: 39.9375em ) { .header__links { position: absolute; } } @media screen and ( min-width: 40em ) { .header__links { position: relative; } } .header__links .button { font-size: 1.8rem; } @media screen and ( min-width: 40em ) and ( max-width: 63.9375em ) { .header__links .button { font-size: 1.4rem; } } .header__links .button [class*=ri-] { pointer-events: none; } .header__links > ul { width: calc(100% + var(--header-nav-gap) * 1); padding-block-start: var(--cta-height); padding-block-end: 1em; background: var(--background-color); box-shadow: var(--shadow--default); border-radius: var(--radius--default); overflow: hidden; position: absolute; top: -0.25em; left: calc(var(--header-nav-gap) * -0.5); z-index: -1; } @media screen and ( max-width: 39.9375em ) { .header__links > ul { --header-nav-gap: 1.6rem; border-radius: calc(var(--radius--default) * 0.5); } } .header__links li { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .header__links ul ul a { --text-color: var(--text-color--light); font-size: 1.6rem; line-height: 1.2em; white-space: wrap; } .header__links ul ul > li:first-child { padding-block-start: 0.5em; } .header__links a, .header__links li .button { --button-base-height: 3.2rem; --button-color: var(--text-color--accent-light); --text-color: var(--text-color--accent-light); display: flex; min-height: 3.2rem; padding-block: 0; align-items: center; padding-inline: calc(var(--header-nav-gap) * 0.5); white-space: wrap; font-size: 1.8rem; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 0.1rem; text-decoration-color: transparent; } @media screen and ( min-width: 40em ) and ( max-width: 63.9375em ) { .header__links a, .header__links li .button { font-size: 1.4rem; min-height: 2.4rem; } } .header__links a, .header__links li .button { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (hover: hover) { .header__links a:hover, .header__links li .button:hover { text-decoration-color: currentColor; } } .header__links a [class*=ri], .header__links li .button [class*=ri] { --icon-color: var(--button-color); } @media screen and ( max-width: 47.9375em ) { .header__links--quick { display: none; } } @media screen and ( max-width: 39.9375em ) { .header__links--languages { left: var(--grid-gap); z-index: 10; } .header__links--languages .button { --button-secondary: var(--text-color--bright); } } .header__menu { width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; position: fixed; top: 0; left: 0; z-index: 2; } .header__menu::before { content: ""; display: block; position: absolute; top: 0; left: 0; } @media screen and ( max-width: 39.9375em ) { .header__menu::before { width: 100%; height: calc(var(--header-height) * 1.5); background: linear-gradient(to bottom, hsl(from var(--background-color--dark) h s l/100%) 0%, hsl(from var(--background-color--dark) h s l/98.7%) 8.1%, hsl(from var(--background-color--dark) h s l/95.1%) 15.5%, hsl(from var(--background-color--dark) h s l/89.6%) 22.5%, hsl(from var(--background-color--dark) h s l/82.5%) 29%, hsl(from var(--background-color--dark) h s l/74.1%) 35.3%, hsl(from var(--background-color--dark) h s l/64.8%) 41.2%, hsl(from var(--background-color--dark) h s l/55%) 47.1%, hsl(from var(--background-color--dark) h s l/45%) 52.9%, hsl(from var(--background-color--dark) h s l/35.2%) 58.8%, hsl(from var(--background-color--dark) h s l/25.9%) 64.7%, hsl(from var(--background-color--dark) h s l/17.5%) 71%, hsl(from var(--background-color--dark) h s l/10.4%) 77.5%, hsl(from var(--background-color--dark) h s l/4.9%) 84.5%, hsl(from var(--background-color--dark) h s l/1.3%) 91.9%, hsl(from var(--background-color--dark) h s l/0%) 100%); pointer-events: none; z-index: 5; } } @media screen and ( min-width: 40em ) { .header__menu::before { content: ""; width: 50%; height: 100%; background: hsl(from var(--background-color--dark) h 100% 100%/70%); transform-origin: left center; position: absolute; top: 0; left: 0; z-index: -2; scale: 2 1; } @supports not (-moz-appearance: none) { .header__menu::before { backdrop-filter: blur(4px); } } } .header__menu::after { content: ""; display: block; width: 50vw; width: 50dvw; height: 100%; background: var(--background-color--darker); position: absolute; top: 0; left: 50%; z-index: -2; --transition-property: opacity, scale; } @media screen and ( max-width: 39.9375em ) { .header__menu::after { width: 100vw; width: 100dvw; background: var(--background-color--dark); left: 0; } } .header__wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(var(--header-height), 1fr) auto auto 1fr; grid-template-areas: "space-top" "menu" "actions" "space-bottom"; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } @media screen and ( max-width: 39.9375em ) { .header__wrapper { padding-inline: var(--grid-edge); left: 0; } } @media screen and ( min-width: 40em ) { .header__wrapper { position: absolute; top: 0; left: calc(50% + ((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 1 + var(--grid-gap) * (1 - 0) + var(--grid-offset, 0%)); z-index: 4; } } .header__list { grid-area: menu; display: flex; flex-direction: column; } @media screen and ( min-width: 40em ) { .header__list { gap: 0.5em; max-width: calc(50vw - (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 2 + var(--grid-gap) * (2 - 0) + var(--grid-offset, 0%))); } } @media screen and ( min-width: 64em ) { .header__list { gap: 1em; } } .header__item { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media screen and ( max-width: 39.9375em ) { .header__item { width: calc(100% + var(--grid-edge) * 2); padding-inline: var(--grid-edge); position: relative; left: calc(var(--grid-edge) * -1); } } .header__item a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.1rem; text-decoration-color: transparent; } .header__item a.active { text-decoration-color: currentColor; } .header__item > :is(a, button) { display: flex; flex-wrap: wrap; gap: 0; align-content: center; min-height: 4rem; cursor: pointer; font-size: 1.8rem; font-weight: 500; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (hover: hover) { .header__item > :is(a, button):hover { --text-color: var(--text-color--accent-light); } } @media screen and ( max-width: 39.9375em ) { .header__item > :is(a, button) { width: 100%; font-size: 2.4rem; min-height: 4rem; padding-block: 0.75em; gap: 0.15em; justify-content: space-between; } } @media screen and ( min-width: 64em ) { .header__item > :is(a, button) { font-size: 2.4rem; min-height: 4rem; padding-block: 0.25em; gap: 0.25em; } } @media screen and ( min-width: 96em ) { .header__item > :is(a, button) { font-size: 2.6rem; } } .header__item > :is(a, button) small { display: block; flex: 0 0 100%; font-size: 71.4285714286%; color: var(--text-color--accent-alt); pointer-events: none; } @media screen and ( max-width: 39.9375em ) { .header__item > :is(a, button) small { color: var(--text-color--bright); font-size: 1.6rem; font-weight: 300; } } @media screen and ( min-width: 40em ) { .header__item > :is(a, button) [class*=ri-] { display: none; } } @media screen and ( min-width: 40em ) { .header__item > button { position: relative; z-index: 2; } .header__item > button::before { content: ""; display: block; width: 50vw; height: calc(100% + 0.5em); background: var(--background-color--darker); border-start-start-radius: var(--radius--default); border-end-start-radius: var(--radius--default); pointer-events: none; position: absolute; top: calc(50% - 0.1em); left: 0; z-index: -1; } .header__item > button::after { content: ""; display: block; width: 0.75em; height: 0.4166666667em; background: var(--text-color--accent-alt); border-radius: 1em; pointer-events: none; position: absolute; top: 1lh; left: 0; translate: -1.5em -0.5lh; } .header__item > :is(a, button)::after { content: ""; display: block; width: 0.75em; height: 0.4166666667em; background: var(--text-color--accent-alt); border-radius: 1em; pointer-events: none; opacity: 0; position: absolute; top: 1lh; left: 0; translate: -1.5em -0.5lh; scale: 0 1; } .header__item > :is(a, button).active { text-decoration: none; translate: 1.5em 0; } .header__item > :is(a, button).active::after { translate: -1.5em -0.5lh; opacity: 1; scale: 1; } .header__item > :is(a, button):has(+ .header__submenu a.active) { text-decoration: none; translate: 1.5em 0; } .header__item > :is(a, button):has(+ .header__submenu a.active)::after { translate: -1.5em -0.5lh; opacity: 1; scale: 1; } } .header__submenu { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media screen and ( min-width: 40em ) { .header__submenu { display: grid; grid-template-rows: minmax(calc(var(--header-height) - 6em), 1fr) auto 1fr !important; grid-template-areas: "space-top" "menu" "space-bottom"; height: 100vh; height: 100dvh; align-items: start; position: absolute; top: 0; z-index: 4; } } @media screen and ( min-width: 40em ) { .header__sublist { grid-area: menu !important; display: flex; flex-direction: column; height: 100%; padding-block: 6em; -webkit-mask-image: linear-gradient(to bottom, transparent, black 6em, black, black calc(100% - 6em), transparent); mask-image: linear-gradient(to bottom, transparent, black 6em, black, black calc(100% - 6em), transparent); overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } } @media screen and ( min-width: 64em ) { .header__sublist { gap: 0.5em; } } @media screen and ( max-width: 39.9375em ) { .header__subitem:last-child { margin-block-end: 1.5em; } } .header__subitem > :is(a, button) { display: flex; gap: 1em; align-items: center; min-height: 4rem; font-size: 1.6rem; font-weight: 500; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (hover: hover) { .header__subitem > :is(a, button):hover { --text-color: var(--text-color--accent-alt); --icon-color: var(--text-color); } } @media screen and ( max-width: 39.9375em ) { .header__subitem > :is(a, button) { width: 100%; font-size: 1.8rem; padding-block: 0.65em; justify-content: space-between; } } @media screen and ( min-width: 64em ) { .header__subitem > :is(a, button) { font-size: 2rem; } } .header__deepitem { padding-inline-start: 1.2em; } @media screen and ( max-width: 39.9375em ) { .header__deepitem { padding-inline-start: 1em; } .header__deepitem:last-child { margin-block-end: 1em; } } .header__deepitem > :is(a, button) { display: flex; align-items: center; min-height: 3.2rem; font-size: 1.4rem; font-weight: 400; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (hover: hover) { .header__deepitem > :is(a, button):hover { --text-color: var(--text-color--accent-light); --icon-color: var(--text-color); } } @media screen and ( max-width: 39.9375em ) { .header__deepitem > :is(a, button) { font-size: 1.8rem; min-height: 4rem; font-weight: 300; } } @media screen and ( min-width: 64em ) { .header__deepitem > :is(a, button) { font-size: 2rem; min-height: 4rem; font-weight: 300; } } .header__actions { grid-area: actions; padding-block: 1.5em 2em; margin-block-start: 1.5em; border-block-start: 0.1rem solid var(--stroke-color--accent-light); } @media screen and ( min-width: 64em ) { .header__actions { -moz-columns: 2; columns: 2; padding-block: 2em; margin-block-start: 2em; gap: 3em; } } @media screen and ( min-width: 40em ) { .header__actions { max-width: calc(50vw - (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 2 + var(--grid-gap) * (2 - 0) + var(--grid-offset, 0%))); } } .header__actions .button { --button-secondary: var(--blue-200); justify-content: space-between; } @media screen and ( min-width: 64em ) { .header__actions .button { width: 100%; } } @media screen and ( max-width: 63.9375em ) { .header__actions .button { --button-base-height: 3.2rem; } } @media screen and ( max-width: 39.9375em ) { .header__actions .button { --button-base-height: 4rem; } } .page__breadcrumb { margin-block-end: 3em; } .breadcrumb { --grid-width: calc(100vw - var(--grid-edge) * 2); --grid-width: calc(100dvw - var(--grid-edge) * 2); --breadcrumb-gap: 3em; display: flex; max-width: calc(100vw - var(--grid-edge) * 2); gap: var(--breadcrumb-gap); position: relative; z-index: var(--z-index-breadcrumb); translate: var(--grid-edge) 0; } @media screen and ( min-width: 107.5em ) { .breadcrumb { --grid-width: calc(var(--layout-max-width) - var(--grid-edge) * 2); max-width: var(--grid-width); position: relative; left: 50%; translate: calc(var(--layout-max-width) * -0.5 + var(--grid-edge)) 0; } } .breadcrumb.no-transition, .breadcrumb.no-transition *, .breadcrumb.no-transition *::before, .breadcrumb.no-transition *::after, .breadcrumb.no-transition li { transition-duration: 0s !important; } .breadcrumb__home { flex: 0 0 auto; } .breadcrumb a, .breadcrumb button { --text-color: var(--text-color--accent); display: flex; height: var(--breadcrumb-height); align-items: center; font-size: 1.6rem; } @media screen and ( min-width: 40em ) { .breadcrumb a, .breadcrumb button { font-size: 1.8rem; } } .breadcrumb a span, .breadcrumb button span { display: inline-block; max-width: 20em; pointer-events: none; color: var(--text-color); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (hover: hover) { .breadcrumb a:hover, .breadcrumb button:hover { --text-color: var(--text-color--accent-light); } } .breadcrumb__dropdown, .breadcrumb__list { display: inline-flex; gap: var(--breadcrumb-gap); } .breadcrumb__item { position: relative; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .breadcrumb__item:last-child { font-weight: 500; } .breadcrumb__item::before { content: "/"; display: inline-block; font-weight: 400; line-height: 1em; position: absolute; top: 0.5lh; left: calc(var(--breadcrumb-gap) * 0.5 * -1); translate: -50% 0; } .breadcrumb--dropdown a, .breadcrumb--dropdown button { max-width: 100%; } .breadcrumb--dropdown .breadcrumb__list { width: 100%; flex-direction: column; gap: 0; } .breadcrumb--dropdown .breadcrumb__item::before { display: none; } .breadcrumb--dropdown .breadcrumb__item::after { content: ""; display: block; width: 0.5em; height: 1em; border: 0.1rem solid var(--stroke-color--accent-light); border-block-start: 0; border-inline-end: 0; opacity: 0; pointer-events: none; position: absolute; left: -1em; top: 0.5lh; translate: 0 -60%; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .breadcrumb--dropdown .breadcrumb__item span { max-width: 100%; } .breadcrumb--dropdown .breadcrumb__dropdown { max-width: calc(100% - var(--breadcrumb-height) - var(--breadcrumb-gap) - var(--grid-edge)); position: absolute; bottom: 0; left: calc(var(--breadcrumb-height) + var(--breadcrumb-gap)); z-index: 2; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .breadcrumb--dropdown .breadcrumb__dropdown::before { content: ""; display: block; width: calc(100% + 4em); height: calc(100% + 2em); background: var(--background-color); box-shadow: var(--shadow--default); border-radius: var(--radius--default); opacity: 0; pointer-events: none; position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: -1; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .breadcrumb--dropdown .breadcrumb__dropdown.active { translate: 0 calc(100% - var(--breadcrumb-height)); } .breadcrumb--dropdown .breadcrumb__dropdown.active .breadcrumb__item { opacity: 1; pointer-events: auto; } .breadcrumb--dropdown .breadcrumb__dropdown.active .breadcrumb__item::after { opacity: 1; } .breadcrumb--dropdown .breadcrumb__dropdown.active::before { opacity: 1; } .breadcrumb--dropdown .breadcrumb__item:not(:last-child) { opacity: 0; pointer-events: none; } .breadcrumb--dropdown .breadcrumb__home { position: relative; } .breadcrumb--dropdown .breadcrumb__home::after { font-family: "remixicon" !important; font-style: normal; color: var(--icon-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\ea6e"; position: absolute; right: calc(var(--breadcrumb-gap) * -0.5); translate: 50% -0.1em; } .breadcrumb--dropdown.open .breadcrumb__dropdown { translate: 0 calc(100% - var(--breadcrumb-height)); } .breadcrumb--dropdown.open .breadcrumb__dropdown .breadcrumb__item { opacity: 1; pointer-events: auto; } .breadcrumb--dropdown.open .breadcrumb__dropdown .breadcrumb__item::after { opacity: 1; } .breadcrumb--dropdown.open .breadcrumb__dropdown::before { opacity: 1; } .hero--slideshow .hero__content::before, .hero--default .hero__title::after { display: block; width: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 1 + var(--grid-gap) * (1 - var(--minus-gap)) + var(--grid-offset, 0%)); min-width: 4.8rem; height: 1rem; border-radius: 100rem; background: var(--background-color--accent); } .hero { --hero-gap: 2em; } @media screen and ( min-width: 48em ) { .hero { --hero-gap: 2.5em; } } .hero + .row { margin-block-start: calc(var(--row-margin-block) * var(--row-margin-factor, 1)); } .hero__title + .hero__introduction { margin-block-start: var(--hero-gap); } .hero__introduction { font-size: 2rem; line-height: 1.4; font-weight: 300; } @media screen and ( min-width: 48.0625em ) { .hero__introduction { font-size: 2.2rem; } } .hero__introduction * + * { margin-block-start: 0.75em; } .hero__controller { display: flex; gap: 1em; } @media screen and ( min-width: 48em ) { .hero__controller { position: absolute; bottom: var(--hero-gap); right: var(--hero-gap); z-index: 2; } } @media screen and ( max-width: 47.9375em ) { .hero--default { --hero-gap: 1.5em; } } .hero--default .hero__title { position: relative; } @media screen and ( min-width: 48em ) { .hero--default .hero__title { padding-inline-end: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 2 + var(--grid-gap) * (2 - var(--minus-gap)) + var(--grid-offset, 0%)); } } .hero--default .hero__title::after { content: ""; } @media screen and ( max-width: 47.9375em ) { .hero--default .hero__title::after { margin-block-start: 0.5em; } } @media screen and ( min-width: 48em ) { .hero--default .hero__title::after { position: absolute; top: 0.5lh; right: 0; translate: 0 -50%; } } .hero--default .hero__buttons { margin-block-start: 1em; } .hero--simple, .hero--card { --hero-gap: 0.5em; } .hero--simple * + .hero__buttons, .hero--card * + .hero__buttons { margin-block-start: var(--hero-gap); } .hero--simple .hero__tags, .hero--card .hero__tags { order: -1; margin-block-end: var(--hero-gap); } .hero--simple .hero__introduction, .hero--card .hero__introduction { margin-block-start: 0; } @media screen and ( min-width: 48em ) and ( max-width: 79.9375em ) { .hero--simple .hero__introduction, .hero--card .hero__introduction { font-size: 1.8rem; } } .hero--simple .hero__image, .hero--card .hero__image { aspect-ratio: var(--ratio--3x2); border-radius: var(--radius--default); } @media screen and ( max-width: 63.9375em ) { .hero--simple .hero__image, .hero--card .hero__image { order: -1; aspect-ratio: var(--ratio--2x1); } } @media screen and ( min-width: 80em ) { .hero--simple .hero__image, .hero--card .hero__image { margin-block-start: -2lh; } } .hero--card .hero__content { align-self: center; padding-block: 1lh; } @media screen and ( max-width: 63.9375em ) { .hero--card .hero__content { padding-block: 1em; } } @media screen and ( min-width: 64em ) and ( max-width: 79.9375em ) { .hero--card .hero__introduction { font-size: 1.8rem; } } @media screen and ( min-width: 64em ) { .page:has(.hero--card):has(.breadcrumb) .breadcrumb { margin-block-end: 0; } .page:has(.hero--card):has(.breadcrumb) .hero--card { margin-block-start: calc(var(--breadcrumb-height) * -1); } .page:has(.hero--card):has(.breadcrumb) .hero__content { padding-block-start: var(--breadcrumb-height); } } .hero--slideshow { position: relative; z-index: 2; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .hero--slideshow::after { content: ""; display: block; width: 100%; height: 100%; box-shadow: var(--shadow--default); background: var(--background-color); border-radius: var(--radius--default); position: absolute; top: 0; left: 0; z-index: -1; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .hero--slideshow .hero__list { overflow: hidden; } .hero--slideshow .hero__container { display: grid; grid-template-rows: 0fr 0fr; grid-template-columns: auto; grid-column: 1/-1; grid-row: 1/-1; } .hero--slideshow .hero__overflow { grid-row: 1/-1; grid-column: 1/-1; overflow: hidden; } @media screen and ( max-width: 47.9375em ) { .hero--slideshow .hero__slide:has(.hero__image) { gap: 0; } } @media screen and ( max-width: 79.9375em ) { .hero--slideshow .hero__slide:has(.hero__image) .hero__wrapper { padding-inline: 2em 0; } } @media screen and ( max-width: 47.9375em ) { .hero--slideshow .hero__slide:has(.hero__image) .hero__wrapper { padding-inline: 2em; } } @media screen and ( min-width: 48em ) and ( max-width: 63.9375em ) { .hero--slideshow .hero__slide:has(.hero__image) .hero__title { --title-size: 3.2rem; } } .hero--slideshow .hero__wrapper { padding-block: var(--hero-gap); } @media screen and ( max-width: 63.9375em ) { .hero--slideshow .hero__wrapper { padding-inline: 2em; } } .hero--slideshow .hero__header { display: flex; flex-direction: column; } .hero--slideshow .hero__overtitle { order: -1; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--title-color); } .hero--slideshow .hero__content { margin-block-start: 1em; position: relative; } @media screen and ( min-width: 64em ) { .hero--slideshow .hero__content { padding-inline-start: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 1 + var(--grid-gap) * (1 - 0) + var(--grid-offset, 0%)); } } .hero--slideshow .hero__content::before { content: ""; } @media screen and ( max-width: 63.9375em ) { .hero--slideshow .hero__content::before { margin-block-end: 1.5em; } } @media screen and ( min-width: 64em ) { .hero--slideshow .hero__content::before { position: absolute; top: 0.5lh; left: 0; translate: 0 -50%; } } .hero--slideshow .hero__content > * + .hero__buttons { margin-block-start: 1.5em; } .hero--slideshow .hero__introduction { max-width: 39em; font-size: 1.6rem; font-weight: 400; } .hero--slideshow .hero__image { align-self: stretch; border-start-end-radius: var(--radius--default); border-end-end-radius: var(--radius--default); } @media screen and ( max-width: 47.9375em ) { .hero--slideshow .hero__image { border-start-start-radius: var(--radius--default); border-end-end-radius: 0; order: -1; aspect-ratio: var(--ratio--5x3); } } @media screen and ( max-width: 47.9375em ) { .hero--slideshow .hero__controller { padding-inline: 2em; padding-block-end: var(--hero-gap); } } .hero--slideshow .hero__controller .button--outline:not(:hover) { --button-background: var(--button-secondary); } .hero--grey { --hero-background: var(--background-color--light); position: relative; } .hero--grey::before { content: ""; display: block; width: 100vw; height: calc(100% + var(--header-height) + var(--block-margin-block) + var(--content-padding-block)); background: var(--hero-background); position: absolute; top: calc(var(--header-height) * -1 - var(--content-padding-block)); left: 50%; translate: -50% 0; z-index: -1; } @media screen and ( max-width: 47.9375em ) { .hero--grey + .row > *:first-child:has(.card--list) { position: relative; z-index: 2; padding-block-end: var(--block-margin-block); } .hero--grey + .row > *:first-child:has(.card--list)::before { content: ""; display: block; width: 100vw; width: 100dvw; height: 100%; background: var(--background-color--light); position: absolute; top: 0; left: 50%; translate: -50% 0; } } @media screen and ( min-width: 48em ) { .hero--grey + .row > *:first-child:has(.card--list) .block__item:first-child .card { position: relative; } .hero--grey + .row > *:first-child:has(.card--list) .block__item:first-child .card::before { content: ""; display: block; width: 100%; aspect-ratio: var(--card-image-ratio); background: var(--background-color--light); position: absolute; z-index: -1; scale: 100 1; } } .row + .row { margin-block-start: var(--row-margin-block); } .row--shrink { --row-margin-factor: 0.5; } @media screen and ( min-width: 80em ) { .row--shrink { --row-margin-factor: 0.25; } } .block { --block-stroke: var(--stroke-color); --block-stroke-blend: plus-lighter; --block-padding-block: 2em; } @media screen and ( min-width: 40em ) { .block { --block-padding-block: 3em; } } @media screen and ( min-width: 64em ) { .block { --block-padding-block: 4em; } } .block:has(.js-select.open) { position: relative; z-index: 10; } :where(.block + .block) { margin-block-start: calc(var(--block-margin-block) * var(--block-margin-factor, 1)); } .block__header + * { margin-block-start: 1em; } .block__list--bordered { row-gap: 0; } .block__list--bordered .block__item + .block__item { border-block-start: 0.1rem solid var(--stroke-color); } .block__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1em; } .block--contrasted { padding-block: 2em; padding-inline: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 1 + var(--grid-gap) * (1 - 0) + var(--grid-offset, 0%)); position: relative; z-index: 2; } .block--contrasted::before { content: ""; display: block; width: 100%; height: 100%; background: var(--block-background, black); border-radius: var(--radius--default); position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: -1; } .block--shadow::before { box-shadow: var(--shadow--default); } .block--white { --block-background: var(--background-color); } .block--blue { --text-color: var(--text-color--bright); --title-color: var(--title-color--bright); --block-background: var(--background-color--dark); --block-stroke: var(--white); --selection-background: var(--blue-100); } .block--yellow { --text-color: var(--yellow-800); --title-color: var(--yellow-800); --block-background: var(--background-color--accent); --block-stroke: var(--yellow-800); --block-stroke-blend: hard-light; --selection-color: var(--yellow-800); --selection-background: hsl(from var(--yellow-500) h s 75% / 100%); } .block--grey { --block-background: var(--background-color--light); --block-stroke: var(--blue-800); --block-stroke-blend: auto; } .block--shrink { --block-margin-factor: 0.5; } .block--default .block__overtitle { --text-color: var(--text-color--accent); order: -1; font-weight: 300; } .block--default .block__header { --grid-gap-block: 1em; } .block--default .block__header:has(.block__overtitle) .block__title { margin-block-start: -0.8rem; } .block--default .block__header + .block__content { margin-block-start: 0; } .block--default .block__content + * { margin-block-start: 1em; } @media screen and ( max-width: 47.9375em ) { .block--default .block__list.flex--grid { row-gap: 2.5em; } } @media screen and ( max-width: 47.9375em ) { .block--default .block__list:has(.card--texted).flex--grid { row-gap: 0; } } .block--default .block__rte { margin-block-start: -0.5em; } .block--default .block__footer { display: flex; flex-wrap: wrap; gap: 1em; } .block--cta .block__item + .block__item::before, .block--cta .block__list::before, .block--cta .block__list::after { content: ""; display: block; width: 100%; height: 0.1rem; background: linear-gradient(to right, var(--block-stroke) 30%, transparent); mix-blend-mode: var(--block-stroke-blend); opacity: 0.515; position: absolute; left: 0; } .block--cta .block__wrapper { grid-row: 1/-1; gap: 1em; padding-block: var(--block-padding-block); margin-block-start: var(--block-padding-block); border-radius: var(--radius--default); background: var(--block-background); } @media screen and ( max-width: 47.9375em ) { .block--cta .block__wrapper { width: calc(100% + var(--grid-edge) * 2); padding-inline: var(--grid-edge); border-radius: 0; position: relative; left: 50%; translate: -50% 0; } } @media screen and ( min-width: 48em ) { .block--cta .block__wrapper { padding-inline: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--column-size) - 1)) / var(--column-size) * 1 + var(--grid-gap) * (1 - 1) + var(--grid-offset, 0%)) calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--column-size) - 1)) / var(--column-size) * 1 + var(--grid-gap) * (1 - 0) + var(--grid-offset, 0%)); } } .block--cta .block__wrapper .button--texted { --button-base-height: 5.6rem; font-size: 2.1rem; } @media screen and ( max-width: 47.9375em ) { .block--cta .block__wrapper .button--texted { --button-base-height: 6.4rem; } } @media screen and ( min-width: 80em ) { .block--cta .block__wrapper .button--texted { --button-base-height: 6.4rem; font-size: 2.4rem; } } .block--cta .block__overtitle { order: -1; font-weight: 300; } .block--cta .block__item { position: relative; } .block--cta .block__item .button { display: flex; justify-content: space-between; } .block--cta .block__list { flex: 0 0 auto; position: relative; } .block--cta .block__list::before { top: 0; } .block--cta .block__list::after { bottom: 0; } .block--cta .block__item + .block__item::before { top: 0; } .block--cta .block__image { grid-row: 1/-1; aspect-ratio: var(--ratio--square); border-radius: var(--radius--default); } @media screen and ( max-width: 47.9375em ) { .block--cta .block__image { display: none; } } @media screen and ( min-width: 64em ) { .block--cta .block__image { aspect-ratio: var(--ratio--5x3); } } .block--aside > * { grid-row: 1/-1; } .block--aside .block__wrapper { gap: 1em; padding-block: var(--block-padding-block); padding-inline: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--column-size) - 1)) / var(--column-size) * 1.4 + var(--grid-gap) * (1.4 - 0) + var(--grid-offset, 0%)) calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--column-size) - 1)) / var(--column-size) * 1 + var(--grid-gap) * (1 - 0) + var(--grid-offset, 0%)); border-radius: var(--radius--default); background: var(--block-background); } @media screen and ( max-width: 47.9375em ) { .block--aside .block__wrapper { padding-inline: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--column-size) - 1)) / var(--column-size) * 1 + var(--grid-gap) * (1 - 0) + var(--grid-offset, 0%)); grid-row: 2; border-start-start-radius: 0; border-start-end-radius: 0; } } .block--aside .block__overtitle { order: -1; } .block--aside .block__rte { margin-block-start: -0.5em; } .block--aside .block__footer { display: flex; gap: 0.8rem 1.5em; } .block--aside .block__image { border-radius: var(--radius--default); } @media screen and ( max-width: 63.9375em ) { .block--aside .block__image { aspect-ratio: var(--ratio--square); align-self: end; translate: 0 var(--block-padding-block); } } @media screen and ( max-width: 47.9375em ) { .block--aside .block__image { aspect-ratio: var(--ratio--5x3); border-end-start-radius: 0; border-end-end-radius: 0; translate: 0 0; } } @media screen and ( min-width: 64em ) { .block--aside .block__image { aspect-ratio: var(--ratio--5x3); margin-block-start: var(--block-padding-block); } } .block--slider .block__wrapper { gap: 1em; position: relative; z-index: 2; } @media screen and ( max-width: 63.9375em ) { .block--slider .block__wrapper { margin-block-end: 2em; } } .block--slider .block__overtitle { order: -1; color: var(--text-color--accent); } .block--slider .block__footer { align-items: flex-start; flex: 1; } .block--slider .block__controller { display: none; gap: 1em; margin-block-start: auto; } @media screen and ( min-width: 64em ) { .block--slider .block__controller { display: flex; padding-block-end: 2lh; } } .block--slider .block__list { flex-wrap: nowrap; } .block--slider .block__item { display: flex; } .block--banner.block--contrasted { padding-inline: 0; } .block--banner.block--contrasted::before { width: 100vw; border-radius: 0; } .block--banner .block__header .tag__list { order: -1; } .block--banner .block__header .block__rte { margin-block-start: -0.5em; } .block--banner .block__header + * { margin-block-start: 0; } .block--banner .block__column { display: flex; flex-direction: column; align-items: flex-start; gap: 1em; } @media screen and ( max-width: 39.9375em ) { .block--banner .block__column + .block__column { margin-block-start: 1.5em; } } .block--banner .block__column address { font-size: 1.8rem; } .block--banner .block__column address > * + * { margin-block-start: 0.5em; } .block--banner .block__column address strong { font-weight: 450; } .block--banner .block__column .block__list { -moz-columns: 2; columns: 2; gap: var(--grid-gap); } @media screen and ( max-width: 39.9375em ) { .block--banner .block__column .block__list { -moz-columns: 1; columns: 1; } } .block--banner .block__column .block__list .button { --button-base-height: 4rem; } .block--rte { display: flex; flex-direction: column; align-items: flex-start; } .block--rte > .block:not([class*=col-]) { width: 100%; } .block--images { position: relative; } .block--images img { border-radius: var(--radius--default); } .block--images figcaption { padding-block-start: 1em; padding-inline: calc(var(--radius--default) * 0.5); } .block--images.js-slideshow .block__controller { gap: 1em; } @media screen and ( max-width: 47.9375em ) { .block--images.js-slideshow .block__controller { display: none; } } @media screen and ( min-width: 48em ) { .block--images.js-slideshow .block__controller { position: absolute; bottom: 0; right: calc(var(--radius--default) * 0.5); } } @media screen and ( min-width: 48em ) { .block--images.js-slideshow figcaption { sdisplay: flex; min-height: calc(4rem + 1em); align-items: center; padding-inline-end: calc(var(--radius--default) * 0.5 + 4rem * 2 + 2em); } } .block--media .block__video { position: relative; } .block--media .block__video img { border-radius: var(--radius--default); } .block--media .block__button { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; cursor: pointer; position: absolute; top: 0; left: 0; } @media (hover: hover) { .block--media .block__button:hover [class*=ri-] { scale: 1.1; } } .block--media .block__button [class*=ri-] { --icon-color: var(--yellow-800); font-size: 2em; position: relative; z-index: 2; } @media screen and ( min-width: 40em ) { .block--media .block__button [class*=ri-] { font-size: 3em; } } .block--media .block__button [class*=ri-]:not(.ri-youtube-fill)::after { content: ""; display: block; width: 2em; height: 2em; background: var(--yellow-500); border-radius: 100rem; position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: -1; } .block--media .block__button [class*=ri-]:not(.ri-youtube-fill)::before { translate: 0.05em 0; } .block--media .block__button .ri-youtube-fill { --icon-color: red; font-size: 5em; } @media screen and ( min-width: 40em ) { .block--media .block__button .ri-youtube-fill { font-size: 8em; } } .block--media .block__button .ri-youtube-fill::after { content: ""; display: block; width: 0.4em; height: 0.4em; background: white; border-radius: 100rem; position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: -1; } .block--buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 1em; } .block--columns-2 { gap: var(--grid-gap); -moz-columns: 2; columns: 2; } .card { --card-background: var(--background-color); --card-padding-inline: 1.5em; --card-image-ratio: var(--ratio--3x2); inline-size: 100%; container-type: inline-size; container-name: card; position: relative; } .card:not(.card--texted) { background: var(--card-background); border-radius: var(--radius--default); box-shadow: var(--shadow--default); } .card__item { display: flex; } .card__list.tag__list { display: flex; flex-wrap: wrap; gap: 0.5em 1.25em; order: -1; } .card__below-title { font-weight: 300; } .card__image { aspect-ratio: var(--card-image-ratio); } @container card (width < 35rem) { .card .button:not(.button--texted) { --button-base-height: 4rem; font-size: 1.4rem; } } @container card (width > 35rem) { .card > * { --card-padding-inline: 2em; } .card .card__image, .card::before { --card-image-ratio: var(--ratio--2x1); } } @container card (width > 40rem) { .card > * { --card-padding-inline: 2.5em; } } .card--simple { --card-padding-inline: 2em; --grid-gap-block: 0.5em; padding-block: 2em; padding-inline: var(--card-padding-inline); } .card--simple .card__footer { display: flex; flex-wrap: wrap; gap: 0.5em; } .card--texted { padding-block: 2em 1em; } .card--texted .card__header + .card__content { margin-block-start: 0.5em; } .card--texted .card__list.tag__list { order: 0; translate: 0 -0.25lh; } .card--texted .card__footer .button::after { content: ""; display: block; width: 100%; height: 100%; border-radius: var(--radius--default); position: absolute; top: 0; left: 0; } .card--cta { row-gap: 0; } .card--cta .card__wrapper { --grid-gap-block: 0.75em; padding-block: var(--card-padding-inline); padding-inline-end: var(--card-padding-inline); } .card--cta .card__image { border-start-start-radius: var(--radius--default); border-end-start-radius: var(--radius--default); order: -1; } @container card (width < 60rem) { .card--cta .card__image { flex: 0 0 100%; aspect-ratio: var(--ratio--2x1); border-start-end-radius: var(--radius--default); border-end-start-radius: 0; } .card--cta .card__wrapper { padding-inline: var(--card-padding-inline); } } @container card (width > 60rem) { .card--cta .card__image { flex: 0 0 calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 4 + var(--grid-gap) * (4 - 1) + var(--grid-offset, 0%)); min-width: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 4 + var(--grid-gap) * (4 - 1) + var(--grid-offset, 0%)); } } @container card (width > 70rem) { .card--cta .card__image { flex: 0 0 calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 3 + var(--grid-gap) * (3 - 1) + var(--grid-offset, 0%)); min-width: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 3 + var(--grid-gap) * (3 - 1) + var(--grid-offset, 0%)); } } .card--list { --card-image-ratio: var(--ratio--2x1); display: flex; flex-direction: column; padding-block-end: 1.5em; } .card--list > *:not(.card__image) { padding-inline: var(--card-padding-inline); } .card--list .card__header { padding-block-start: 1.5em; } .card--list .card__header * + .card__buttons { margin-block-start: 1em; } .card--list .card__image { order: -1; border-start-start-radius: var(--radius--default); border-start-end-radius: var(--radius--default); } .card--list .card__list { margin-block-start: 1.5em; } .card--large { --card-image-ratio: var(--ratio--7x3); display: flex; flex-direction: column; padding-block-end: 1.5em; } .card--large > *:not(.card__image) { padding-inline: var(--card-padding-inline); } .card--large .card__header { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 1em; padding-block-start: 2em; } .card--large .card__header .card__list { flex: 0 0 auto; order: -1; margin-block-start: 1lh; translate: 0 -55%; } .card--large .card__image { order: -1; border-start-start-radius: var(--radius--default); border-start-end-radius: var(--radius--default); } .card--large .card__content { margin-block-start: 0.5em; } .card--large .card__content .card__list { -moz-columns: 2; columns: 2; } @container card (width < 45rem) { .card--large .card__image { aspect-ratio: var(--ratio--3x2); } .card--large .card__header { flex-wrap: wrap; } .card--large .card__header .card__list { margin-block-start: 0; translate: 0 0; } .card--large .card__title { flex: 0 0 100%; } .card--large .card__content .card__list { -moz-columns: 1; columns: 1; } .card--large .card__content .card__list .button { --button-base-height: 4rem; } } .card--article { display: flex; flex-direction: column; padding-block-end: 1em; position: relative; } .card--article > *:not(.card__image) { padding-inline: var(--card-padding-inline); } .card--article .card__header { padding-block-start: 2em; } .card--article .card__image { order: -1; border-start-start-radius: var(--radius--default); border-start-end-radius: var(--radius--default); } .card--article .card__content { margin-block-start: 0.5em; } .card--article .card__footer { margin-block-start: auto; } .card--article .card__footer .button::after { content: ""; display: block; width: 100%; height: 100%; border-radius: var(--radius--default); position: absolute; top: 0; left: 0; } .accordion__list { row-gap: 0 !important; border-block: 0.1rem solid var(--stroke-color); inline-size: 100%; container-type: inline-size; container-name: accordion; } @container accordion (width < 40rem) { .accordion__list .accordion__title { --title-size: 1.8rem; } } .accordion__item + .accordion__item { border-block-start: 0.1rem solid var(--stroke-color); } .accordion__title { --title-size: 2.2rem; } .accordion__button { --icon-color: var(--title-color); display: grid; width: 100%; grid-template-columns: 1fr auto; grid-template-rows: auto; grid-template-areas: "text icon"; gap: 1em; align-items: center; padding-block: 3.2rem; cursor: pointer; color: var(--title-color); } .accordion__button > * { grid-row: 1/-1; } .accordion__button [class*=ri] { grid-area: icon; pointer-events: none; } .accordion__overflow > *:last-child { padding-block-end: 2em; } .slideshow { position: relative; } .slideshow__list { display: grid; position: relative; } .slideshow__item { grid-column: 1/-1; grid-row: 1/-1; } @media screen and ( min-width: 48em ) { .slideshow__item .project__wrapper { margin-block-end: calc(4.4rem + var(--radius--lg)); } } .slideshow__controller { display: flex; gap: 0.8rem; position: absolute; z-index: 10; bottom: var(--radius--lg); } @media screen and ( max-width: 47.9375em ) { .slideshow__controller { justify-content: center; } } .slideshow__bullets { display: flex; gap: 0.8rem; pointer-events: none; position: absolute; z-index: 2; } .slideshow__bullet { --bullet-primary: var(--background-color); --bullet-background: transparent; --bullet-stroke: var(--bullet-primary); display: block; width: 1.2rem; height: 1.2rem; border: 0.1rem solid var(--bullet-stroke); border-radius: 100rem; background: var(--bullet-background); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .slideshow__bullet.active { --bullet-background: var(--bullet-primary); } .slideshow--simple .slideshow__bullets { right: calc(var(--radius--lg) * 0.5); bottom: calc(var(--radius--lg) * 0.5); } .slideshow--simple .slideshow__controller { left: calc(var(--radius--lg) * 0.5); bottom: calc(var(--radius--lg) * 0.5); } @media screen and ( max-width: 47.9375em ) { .slideshow--home .slideshow__controller { position: static; } } @media screen and ( max-width: 79.9375em ) { .slideshow--wide .project__wrapper { margin-block-end: 0; } } @media screen and ( max-width: 79.9375em ) { .slideshow--wide .slideshow__controller { position: static; margin-block-start: 0.8rem; } } .pagination { display: flex; gap: 1em; align-items: center; } @media screen and ( max-width: 39.9375em ) { .pagination { justify-content: space-between; } } @media screen and ( min-width: 40em ) { .pagination { gap: 3em; } } .pagination--alt { gap: 1em; } @media screen and ( max-width: 47.9375em ) { .pagination--alt { justify-content: center; } } .pagination__list { display: flex; gap: 0.2rem; align-items: baseline; font-size: 1.8rem; } @media screen and ( max-width: 24.3125em ) { .pagination__list { font-size: 1.4rem; } } .pagination__item a { display: flex; width: 3.2rem; height: 3.2rem; align-items: center; justify-content: center; padding-block-start: 0.15em; border-radius: 100rem; text-align: center; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media screen and ( max-width: 24.3125em ) { .pagination__item a { width: 2.4rem; height: 2.4rem; } } @media (hover: hover) { .pagination__item a:hover { background: var(--background-color--dark); color: var(--text-color--bright); } } .pagination__item span { margin-inline: 0.25em; } .pagination__button { --button-base-height: 3.2rem; --button-padding-inline: 0.75em; } .dialog { background: var(--background-color); box-shadow: var(--shadow--default); border-radius: var(--radius--default); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media screen and ( max-width: 39.9375em ) { .dialog { font-size: 1.4rem; } } .dialog p { max-width: 45em; } .dialog:not(.visible) { opacity: 0; pointer-events: none; } .dialog__title { --title-size: 2rem; } .dialog__buttons { display: flex; align-items: center; justify-content: space-between; gap: 1em; } @media screen and ( max-width: 39.9375em ) { .dialog__buttons { flex-direction: column; align-items: stretch; } .dialog__buttons .button { width: 100%; justify-content: center; } } .dialog__actions { display: flex; gap: 1em; } @media screen and ( max-width: 39.9375em ) { .dialog__actions { width: 100%; flex-direction: column; align-items: stretch; } .dialog__actions .button { width: 100%; justify-content: center; } } .dialog__close { position: absolute; top: 1em; right: 1em; } .dialog__header { display: flex; flex-direction: column; gap: 0.75em; } .dialog__header > *:not(.dialog__buttons) { padding-inline-end: calc(4rem + 1em); } .dialog__list { display: flex; flex-direction: column; gap: 2.5em; padding-block-start: 2.5em; margin-block-start: 2.5em; border-block-start: 0.1rem solid var(--stroke-color); } .dialog__item { gap: var(--grid-gap); } .dialog__scroller { max-height: calc(100vh - var(--header-height) - var(--grid-gap)); padding: 1.5em; -webkit-mask-image: linear-gradient(to bottom, transparent, black 1.5em, black calc(100% - 2em), transparent); mask-image: linear-gradient(to bottom, transparent, black 1.5em, black calc(100% - 2em), transparent); overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } @media screen and ( min-width: 40em ) { .dialog__scroller { padding: 2.5em; -webkit-mask-image: linear-gradient(to bottom, transparent, black 2.5em, black calc(100% - 3em), transparent); mask-image: linear-gradient(to bottom, transparent, black 2.5em, black calc(100% - 3em), transparent); } } .dialog--cookies { --grid-width: calc(100% - var(--grid-edge) * 2); position: fixed; bottom: var(--grid-gap); left: var(--grid-edge); z-index: var(--z-index-dialog); } @media screen and ( min-width: 107.5em ) { .dialog--cookies { --grid-width: 160rem; } } .footer { --text-color: var(--text-color--accent); row-gap: 1.5em; padding-block-start: 2em; margin-block-start: var(--block-margin-block); } .footer, .footer__colophon { position: relative; z-index: 2; } .footer::before, .footer__colophon::before { content: ""; display: block; width: 100vw; height: 100%; background: var(--background-color--light); position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: -1; } .footer__logo img { max-width: 12rem; } @media screen and ( max-width: 48em ) { .footer__logo img { margin-inline: auto; } } .footer__title { margin-block-end: 0.8rem; } @media screen and ( min-width: 64em ) and ( max-width: 79.9375em ) { .footer__title { font-size: 1.4rem; } } .footer__rte > p:first-child { margin-block-end: 1em; } .footer__rte a, .footer__colophon a { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 0.1rem; text-decoration-color: transparent; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (hover: hover) { .footer__rte a:hover, .footer__colophon a:hover { text-decoration-color: currentColor; } } @media screen and ( min-width: 64em ) and ( max-width: 79.9375em ) { .footer__column { font-size: 1.4rem; line-height: 1.5em; } } @media screen and ( min-width: 64em ) and ( max-width: 79.9375em ) { .footer__nav .button { font-size: 1.4rem; } } .footer__colophon { display: flex; flex-wrap: wrap; gap: var(--grid-gap); justify-content: space-between; align-items: baseline; padding-block: 1.5em; font-size: 1.4rem; } @media screen and ( max-width: 48em ) { .footer__colophon { justify-content: center; gap: 1em; } } .footer__colophon::before { background: var(--background-color--dark); } .footer__colophon small { font-weight: 500; } .footer__colophon .footer__list { display: flex; } @media screen and ( max-width: 47.9375em ) { .footer__colophon .footer__list { flex-direction: column; align-items: center; width: 100%; } } .footer__colophon .footer__item { display: flex; } @media screen and ( max-width: 47.9375em ) { .footer__colophon .footer__item { padding-block: 0.25em; } } @media screen and ( min-width: 48em ) { .footer__colophon .footer__item + .footer__item::before { content: "-"; margin-inline: 0.75em; } } .page--guidelines code { padding: 0.25em 0.45em; font-family: monospace; background: #777; border-radius: 0.4rem; mix-blend-mode: luminosity; font-size: 0.6em; color: white; } .page--guidelines .row { --block-margin-block: 4em; } .page--guidelines .row > .block + .block { margin-block-start: var(--block-margin-block); } .page--guidelines .row > .block + .block:not(.block--contrasted) { border-block-start: 0.1rem dashed var(--stroke-color); padding-block-start: var(--block-margin-block); } .page--guidelines .row > .block__code { display: inline-block; padding-inline: 2em; margin-block-end: 1em; color: #333; font-size: 1.6rem; line-height: 1.5em; background: #ccc; border-radius: 0.5em; } .page--guidelines .row > .block__code pre { color: currentColor; } .page--guidelines .row > .block--icons { display: flex; flex-wrap: wrap; gap: 0.5em; } .page--guidelines .row > .block--icons li { display: inline-flex; align-items: center; justify-items: center; padding: 1em; aspect-ratio: 1/1; background: var(--background-color--light); border-radius: 0.8rem; position: relative; } .page--guidelines .row > .block--icons li * { pointer-events: none; } .page--guidelines .row > .block--icons li::after { content: attr(data-tooltip); padding: 0.25em 0.5em; border-radius: 0.4rem; background: var(--background-color--dark); opacity: 0; white-space: nowrap; color: var(--text-color--bright); position: absolute; top: 0; left: 50%; translate: -50% -100%; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .page--guidelines .row > .block--icons li:hover::after { opacity: 1; } .page--guidelines .row > .block--icons i { font-size: 2em; } .header__search, .header__links, .header__links ul, .header__menu, .header__list, .header__actions, .header__menu::before, .header__menu::after { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); transition-duration: 0.8s; } body:where(.scrolled) .header::before { opacity: 1; } @media screen and ( min-width: 40em ) { .js-header__menu .header__item { opacity: 1; } .js-header__menu:not(.open) .header__submenu { opacity: 0; pointer-events: none; } } @media screen and ( min-width: 40em ) { .js-header__menu.open::before { background: hsl(from var(--background-color--dark) h s l/95%); } @supports not (-moz-appearance: none) { .js-header__menu.open::before { background: hsl(from var(--background-color--dark) h s l/90%); } } } @media screen and ( min-width: 40em ) { .js-header__menu.open .header__wrapper { translate: -50vw 0; } } @media screen and ( min-width: 40em ) { .js-header__menu.open .header__submenu { translate: 50vw 0; } } .js-header:not(.open) .header__menu { pointer-events: none; } .js-header:not(.open) .header__menu::before { opacity: 0; } .js-header:not(.open) .header__menu::after { scale: 1 0; transform-origin: left bottom; } .js-header:not(.open) .header__list, .js-header:not(.open) .header__actions { opacity: 0; } @media screen and ( max-width: 39.9375em ) { .js-header:not(.open) .header__links, .js-header:not(.open) .header__search { opacity: 0; pointer-events: none; } } .js-header.open::before { opacity: 0; } .js-header.open .header__button .button__content--1 { grid-template-columns: 0fr 0fr; } .js-header.open .header__button .button__content--2 { grid-template-columns: 0fr 1fr; } .js-header.open .header__menu::after { scale: 1 1; transform-origin: left top; } .js-header.open .header__list { opacity: 1; } .js-header.open .header__button { --button-primary: var(--blue-900); --button-background: var(--button-secondary); --button-color: var(--button-primary); --button-stroke: var(--button-primary); } .js-header.open .header__button .ri-menu { background: transparent; } .js-header.open .header__button .ri-menu::before { translate: 0 0; rotate: 45deg; } .js-header.open .header__button .ri-menu::after { translate: 0 0; rotate: 135deg; } .js-header__links:not(.open) ul { opacity: 0; pointer-events: none; } .js-header__links.open .button { --button-secondary: var(--text-color--accent); } .no-scroll, .no-scroll body, .no-scroll .page__wrapper { overflow: hidden; -ms-overflow-style: none; scrollbar-width: none; } .js-accordion__content, .js-accordion__overflow, .js-accordion__button::before, .js-accordion__button::after { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .js-accordion__content { display: grid; } .js-accordion__content > * { grid-row: 1/-1; } .js-accordion__overflow { width: 100%; overflow: hidden; } .js-accordion__button { cursor: pointer; } .js-accordion__button .icon, .js-accordion__button [class*=ri-] { pointer-events: none; } .js-accordion:not(.expand) > .js-accordion__content { grid-template-rows: var(--accordion-based-height, 0fr) 0fr; opacity: 0; pointer-events: none; } .js-accordion:not(.expand) > .js-accordion__content > .js-accordion__overflow { translate: 0 2.4rem; } .js-accordion:not(.expand) > .accordion__button .closed { transform: translate(0, 100%); opacity: 0; pointer-events: none; } .js-accordion.expand > .js-accordion__content { opacity: 1; grid-template-rows: var(--accordion-based-height, 0fr) 1fr; } .js-accordion.expand > .accordion__button .opened { transform: translate(0, 100%); opacity: 0; pointer-events: none; } .js-accordion.expand > .js-accordion__button [class*=ri-] { transform: scale(1, -1); } .header .js-accordion.expand > .js-accordion__button { --text-color: var(--text-color--accent-alt); --icon-color: var(--text-color); } @media screen and ( max-width: 39.9375em ) { .header .js-accordion--master.expand { background: var(--background-color--darker); } } @media screen and ( min-width: 40em ) { .header .js-accordion--master:not(.expand) > button { translate: 0 0; } .header .js-accordion--master:not(.expand) > button::before { opacity: 0; translate: 0 -50%; } .header .js-accordion--master:not(.expand) > button::after { opacity: 0; scale: 0 1; } .header .js-accordion--master.expand > button { translate: 2.5em 0 !important; } .header .js-accordion--master.expand > button::before { translate: -2.5em -50%; } .header .js-accordion--master.expand > button::after { opacity: 1; scale: 1; } .header .js-accordion--master.expand > .js-accordion__button { --text-color: var(--text-color--bright); } } @media screen and ( min-width: 40em ) { .header__item.js-accordion > .js-accordion__content { grid-template-rows: var(--accordion-based-height, 0fr) 1fr; } .header__item.js-accordion > .js-accordion__content > .js-accordion__overflow { overflow: auto; translate: 0; } } .js-select .select__button [class*=ri-], .js-select .select__wrapper { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .js-select:not(.open) .select__wrapper { opacity: 0; pointer-events: none; } .js-select.open { z-index: 10; } .js-select.open .select__button [class*=ri-] { scale: -1; } .js-slideshow { --slideshow-index: 0; --slideshow-max: 0; } .js-slideshow.enable-transition .js-slideshow__list, .js-slideshow.enable-transition .js-slideshow__item { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .js-slideshow[data-slideshow=default] { --slideshow-max: 0; } @media screen and ( min-width: 48em ) { .js-slideshow[data-slideshow=default] { --slideshow-max: 1; } } @media screen and ( max-width: 47.9375em ) { .js-slideshow[data-slideshow=default].first .js-slideshow__list { translate: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * -1 + var(--grid-gap) * (-1 - 0) + var(--grid-offset, 0%)); } } @media screen and ( max-width: 47.9375em ) { .js-slideshow[data-slideshow=default].last .js-slideshow__list { translate: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 1 + var(--grid-gap) * (1 - 0) + var(--grid-offset, 0%)); } } .js-slideshow[data-slideshow=default] .js-slideshow__item { will-change: transform, opacity; transform: translate(calc((-100% - var(--grid-gap)) * var(--slideshow-index)), 0); } @supports not (-moz-appearance: none) { .js-slideshow[data-slideshow=default] .js-slideshow__item { filter: blur(0); } } @media screen and ( max-width: 47.9375em ) { .js-slideshow[data-slideshow=default] .js-slideshow__item:first-child { margin-inline-start: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 1 + var(--grid-gap) * (1 - 0) + var(--grid-offset, 0%)); } } .js-slideshow[data-slideshow=default] .js-slideshow__item.previous { opacity: 0; pointer-events: none; } @media screen and ( max-width: 47.9375em ) { .js-slideshow[data-slideshow=default] .js-slideshow__item.previous:has(+ .active) { opacity: 0.5; } } @supports not (-moz-appearance: none) { .js-slideshow[data-slideshow=default] .js-slideshow__item.previous:has(+ .active) { filter: blur(4px); } } .js-slideshow[data-slideshow=default] .js-slideshow__item.previous:not(:has(+ .active, + * + .active)) { transition: none; } @media screen and ( max-width: 47.9375em ) { .js-slideshow[data-slideshow=default] .js-slideshow__item.active + * { opacity: 0.5; pointer-events: none; } @supports not (-moz-appearance: none) { .js-slideshow[data-slideshow=default] .js-slideshow__item.active + * { filter: blur(4px); } } .js-slideshow[data-slideshow=default] .js-slideshow__item.active + * + * ~ * { transition: none; } .js-slideshow[data-slideshow=default] .js-slideshow__item.active + * ~ * { opacity: 0; } } @media screen and ( min-width: 48em ) { .js-slideshow[data-slideshow=default] .js-slideshow__item.active + * + * { opacity: 0.5; pointer-events: none; } @supports not (-moz-appearance: none) { .js-slideshow[data-slideshow=default] .js-slideshow__item.active + * + * { filter: blur(4px); } } .js-slideshow[data-slideshow=default] .js-slideshow__item.active + * + * + * ~ * { transition: none; } .js-slideshow[data-slideshow=default] .js-slideshow__item.active + * + * ~ * { opacity: 0; } } .js-slideshow[data-slideshow=rte] { --slideshow-max: 0; } @media screen and ( max-width: 47.9375em ) { .js-slideshow[data-slideshow=rte].first .js-slideshow__list { translate: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * -1 + var(--grid-gap) * (-1 - 0) + var(--grid-offset, 0%)); } } @media screen and ( max-width: 47.9375em ) { .js-slideshow[data-slideshow=rte].last .js-slideshow__list { translate: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 1 + var(--grid-gap) * (1 - 0) + var(--grid-offset, 0%)); } } .js-slideshow[data-slideshow=rte] .js-slideshow__list::before, .js-slideshow[data-slideshow=rte] .js-slideshow__list::after { content: ""; display: block; width: 150%; height: calc(100% + 1em); background: linear-gradient(to right, transparent, var(--background-color) 25%); pointer-events: none; position: absolute; top: 50%; translate: 0 -50%; z-index: 2; } .js-slideshow[data-slideshow=rte] .js-slideshow__list::before { background: linear-gradient(to left, transparent, var(--background-color) 25%); right: 100%; } .js-slideshow[data-slideshow=rte] .js-slideshow__list::after { left: 100%; } .js-slideshow[data-slideshow=rte] .js-slideshow__item { will-change: transform, opacity; transform: translate(calc((-100% - var(--grid-gap)) * var(--slideshow-index)), 0); } @supports not (-moz-appearance: none) { .js-slideshow[data-slideshow=rte] .js-slideshow__item { filter: blur(0); } } @media screen and ( max-width: 47.9375em ) { .js-slideshow[data-slideshow=rte] .js-slideshow__item:first-child { margin-inline-start: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 1 + var(--grid-gap) * (1 - 0) + var(--grid-offset, 0%)); } } .js-slideshow[data-slideshow=rte] .js-slideshow__item.previous { opacity: 0; pointer-events: none; } .js-slideshow[data-slideshow=rte] .js-slideshow__item.previous:has(+ .active) { opacity: 0.5; } @supports not (-moz-appearance: none) { .js-slideshow[data-slideshow=rte] .js-slideshow__item.previous:has(+ .active) { filter: blur(4px); } } .js-slideshow[data-slideshow=rte] .js-slideshow__item.previous:not(:has(+ .active, + * + .active)) { transition: none; } .js-slideshow[data-slideshow=rte] .js-slideshow__item.active + * { opacity: 0.5; pointer-events: none; } @supports not (-moz-appearance: none) { .js-slideshow[data-slideshow=rte] .js-slideshow__item.active + * { filter: blur(4px); } } .js-slideshow[data-slideshow=rte] .js-slideshow__item.active + * + * ~ * { transition: none; } .js-slideshow[data-slideshow=rte] .js-slideshow__item.active + * ~ * { opacity: 0; } .js-slideshow[data-slideshow=loop] .js-slideshow__item { transition-duration: 1s; } .js-slideshow[data-slideshow=loop] .js-slideshow__item:not(.active) { grid-template-rows: 0fr 0fr; translate: 0 -100%; opacity: 0; pointer-events: none; } @supports not (-moz-appearance: none) { .js-slideshow[data-slideshow=loop] .js-slideshow__item:not(.active) { filter: blur(100px); } } .js-slideshow[data-slideshow=loop] .js-slideshow__item.active { grid-template-rows: 0fr 1fr; opacity: 1; translate: 0 0; } @supports not (-moz-appearance: none) { .js-slideshow[data-slideshow=loop] .js-slideshow__item.active { filter: blur(0); } } /* purgecss end ignore */