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;
99 * Flexbox layout system
103 flex-direction: column;
104 align-items: stretch;
118 align-items: stretch;
124 .flex-container-column {
126 flex-direction: column;
135 justify-content: flex-end;
140 * Display and float utilities
152 display: inline-block;
156 display: none !important;
169 @each $sizeLetter, $size in $screen-sizes {
170 @include smaller-than($size) {
171 .hide-under-#{$sizeLetter} {
172 display: none !important;
175 @include larger-than($size) {
176 .hide-over-#{$sizeLetter} {
177 display: none !important;
183 * Inline content columns
185 .dual-column-content {
189 @include smaller-than($m) {
190 .dual-column-content {
211 .tri-layout-container {
213 margin-inline-start: $-xl;
214 margin-inline-end: $-xl;
215 grid-template-columns: 1fr 4fr 1fr;
216 grid-template-areas: "a b c";
217 grid-column-gap: $-xxl;
231 @include smaller-than($xxl) {
232 .tri-layout-container {
233 grid-template-areas: "c b b"
236 grid-template-columns: 1fr 3fr;
237 grid-template-rows: min-content min-content 1fr;
238 padding-inline-end: $-l;
241 @include between($l, $xxl) {
247 @include larger-than($xxl) {
248 .tri-layout-left-contents, .tri-layout-right-contents {
256 scrollbar-width: none;
257 -ms-overflow-style: none;
258 &::-webkit-scrollbar {
262 .tri-layout-middle-contents {
268 @include smaller-than($l) {
269 .tri-layout-container {
270 grid-template-areas: none;
271 grid-template-columns: 1fr;
273 padding-inline-end: $-xs;
274 padding-inline-start: $-xs;
275 .tri-layout-left-contents, .tri-layout-right-contents {
276 padding-inline-start: $-m;
277 padding-inline-end: $-m;
279 .tri-layout-left > *, .tri-layout-right > * {
281 pointer-events: none;
283 .tri-layout-left, .tri-layout-right {
287 padding-top: 0 !important;
295 transition: transform ease-in-out 240ms;
305 .tri-layout-right > *, .tri-layout-left > * {
307 pointer-events: auto;
312 @include larger-than($l) {
313 .tri-layout-mobile-tabs {
316 .tri-layout-left-contents > *, .tri-layout-right-contents > * {
318 transition: opacity ease-in-out 120ms;
329 @include smaller-than($m) {
330 .tri-layout-container {
331 margin-inline-start: 0;
332 margin-inline-end: 0;