/* .............................................................................
HELPERS et AUTRES STYLES
............................................................................. */

/* Uppercase / lowercase */
.tLower {text-transform: none;}
.tUpper {text-transform: uppercase;}


/* Content alignment */
.tCentered {text-align:center;}
.tLeft {text-align:left;}
.tRight {text-align:right;}


/* Colors */
.cBlack {color: var(--color-black); }
.cWhite {color: var(--color-white); }
.cRed {color: var(--color-red); }
.cBlue {color: var(--color-blue); }


/* Text columns */
.tCols2 {columns: 20em 2; column-gap: 12%;}
.tCols2 > * {break-inside: avoid;}
.tCols2 li {display: inline-block; }
.tCols2 + *, * + .tCols2 {margin-top: 3rem;}

.tCols3 {columns: 15em 3; column-gap: 8%;}
.tCols3 > * {break-inside: avoid;}
.tCols3 li {display: inline-block; }
.tCols3 + *, * + .tCols3 {margin-top: 3rem;}


/* Helpers */
.demoIcon .svgIcon {font-size: 3em; margin-top: 0;}
.demoLogos {display: grid;grid-template-columns: repeat(auto-fit, 10em);gap: 2em;}
.noWrap {white-space: nowrap;}
.hideText {text-indent: 100%; white-space: nowrap; overflow: hidden; }
.screenReaderText {display:none;}
.softHide {display: none;} /* Difference between hide and softHide: hide has important, softHide doesn't */
.hidden {display: none !important; visibility: hidden;}
.visuallyHidden {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
.visuallyHidden.focusable:active,
.visuallyHidden.focusable:focus {clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;}
.invisible {visibility: hidden;}
[hidden] {display: none;}