3 * Generic content container
7 margin-inline-start: auto;
8 margin-inline-end: auto;
9 padding-inline-start: $-m;
10 padding-inline-end: $-m;
20 * Core grid layout system
27 grid-template-columns: 1fr 1fr;
30 grid-template-columns: 1fr 1fr 1fr;
33 grid-template-columns: 2fr 1fr;
36 grid-template-columns: 1fr 3fr;
42 grid-column-gap: $-xl;
46 grid-column-gap: $-xxl;
64 @include smaller-than($m) {
65 .grid.third:not(.no-break) {
66 grid-template-columns: 1fr 1fr;
68 .grid.half:not(.no-break), .grid.left-focus:not(.no-break), .grid.right-focus:not(.no-break) {
69 grid-template-columns: 1fr;
71 .grid.half.collapse-xs {
72 grid-template-columns: 1fr 1fr;
78 .grid.right-focus.reverse-collapse > *:nth-child(2) {
81 .grid.right-focus.reverse-collapse > *:nth-child(1) {
86 @include smaller-than($s) {
87 .grid.third:not(.no-break) {
88 grid-template-columns: 1fr;
92 @include smaller-than($xs) {
93 .grid.half.collapse-xs {
94 grid-template-columns: 1fr;
103 * Flexbox layout system
107 flex-direction: column;
108 align-items: stretch;
122 align-items: stretch;
128 .flex-container-row {
136 .flex-container-column {
138 flex-direction: column;
141 .flex-container-column.wrap, .flex-container-row.wrap {
156 justify-content: flex-end;
159 justify-content: center;
161 .justify-space-between {
162 justify-content: space-between;
170 * Display and float utilities
173 display: block !important;
178 display: inline !important;
182 display: inline-block !important;
190 display: none !important;
207 @each $sizeLetter, $size in $screen-sizes {
208 @include smaller-than($size) {
209 .hide-under-#{$sizeLetter} {
210 display: none !important;
213 @include larger-than($size) {
214 .hide-over-#{$sizeLetter} {
215 display: none !important;
228 * Inline content columns
230 .dual-column-content {
234 @include smaller-than($m) {
235 .dual-column-content {
256 .tri-layout-container {
258 margin-inline-start: $-xl;
259 margin-inline-end: $-xl;
260 grid-template-columns: 1fr 4fr 1fr;
261 grid-template-areas: "a b c";
262 grid-column-gap: $-xxl;
277 @include smaller-than($xxl) {
278 .tri-layout-container {
279 grid-template-areas: "c b b"
282 grid-template-columns: 1fr 3fr;
283 grid-template-rows: min-content min-content 1fr;
284 padding-inline-end: $-l;
287 @include between($l, $xxl) {
293 @include larger-than($xxl) {
294 .tri-layout-left-contents, .tri-layout-right-contents {
303 scrollbar-width: none;
304 -ms-overflow-style: none;
305 &::-webkit-scrollbar {
309 .tri-layout-middle-contents {
315 @include smaller-than($l) {
316 .tri-layout-container {
317 grid-template-areas: none;
318 grid-template-columns: 1fr;
320 padding-inline-end: $-xs;
321 padding-inline-start: $-xs;
322 .tri-layout-left-contents, .tri-layout-right-contents {
323 padding-inline-start: $-m;
324 padding-inline-end: $-m;
326 .tri-layout-left > *, .tri-layout-right > * {
328 pointer-events: none;
330 .tri-layout-left, .tri-layout-right {
334 padding-top: 0 !important;
342 transition: transform ease-in-out 240ms;
352 .tri-layout-right > *, .tri-layout-left > * {
354 pointer-events: auto;
359 @include larger-than($l) {
360 .tri-layout-mobile-tabs {
363 .tri-layout-left-contents > *, .tri-layout-right-contents > * {
365 transition: opacity ease-in-out 120ms;
372 @media (prefers-contrast: more) {
379 @include smaller-than($m) {
380 .tri-layout-container {
381 margin-inline-start: 0;
382 margin-inline-end: 0;