*/
.container {
max-width: $xxl;
- margin-left: auto;
- margin-right: auto;
- padding-left: $-m;
- padding-right: $-m;
+ margin-inline-start: auto;
+ margin-inline-end: auto;
+ padding-inline-start: $-m;
+ padding-inline-end: $-m;
&.small {
max-width: 840px;
}
min-height: 0;
max-width: 100%;
position: relative;
- overflow-y: hidden;
}
.flex {
*/
.tri-layout-container {
display: grid;
- margin-left: $-xl;
- margin-right: $-xl;
+ margin-inline-start: $-xl;
+ margin-inline-end: $-xl;
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas: "a b c";
grid-column-gap: $-xxl;
". b b";
grid-template-columns: 1fr 3fr;
grid-template-rows: min-content min-content 1fr;
- padding-right: $-l;
+ padding-inline-end: $-l;
}
}
@include between($l, $xxl) {
grid-template-areas: none;
grid-template-columns: 1fr;
grid-column-gap: 0;
- padding-right: $-xs;
- padding-left: $-xs;
+ padding-inline-end: $-xs;
+ padding-inline-start: $-xs;
.tri-layout-left-contents, .tri-layout-right-contents {
- padding-left: $-m;
- padding-right: $-m;
+ padding-inline-start: $-m;
+ padding-inline-end: $-m;
}
.tri-layout-left > *, .tri-layout-right > * {
display: none;
@include smaller-than($m) {
.tri-layout-container {
- margin-left: 0;
- margin-right: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
}
}
\ No newline at end of file