49 lines
714 B
CSS
49 lines
714 B
CSS
|
.columns {
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 0 var(--global-spacing);
|
||
|
|
display: flex;
|
||
|
|
max-width: calc(var(--site-max-width) + var(--global-spacing-2x));
|
||
|
|
width: 100%;
|
||
|
|
gap: var(--global-spacing);
|
||
|
|
}
|
||
|
|
|
||
|
|
.columns-side {
|
||
|
|
flex-grow: 0;
|
||
|
|
flex-shrink: 0;
|
||
|
|
max-width: 260px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.columns-left {
|
||
|
|
order: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.columns-right {
|
||
|
|
order: 3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.columns-centre {
|
||
|
|
flex-grow: 1;
|
||
|
|
flex-shrink: 1;
|
||
|
|
order: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 1039px) {
|
||
|
|
.columns {
|
||
|
|
flex-direction: column;
|
||
|
|
gap: var(--global-spacing-2x);
|
||
|
|
}
|
||
|
|
|
||
|
|
.columns-left {
|
||
|
|
order: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.columns-centre {
|
||
|
|
order: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.columns-side {
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
}
|