40 lines
684 B
SCSS
40 lines
684 B
SCSS
div {
|
|
&.columns-wrapper {
|
|
container-type: inline-size;
|
|
container-name: columns;
|
|
}
|
|
&.columns-2 {columns: 2;}
|
|
&.columns-3 {columns: 3;}
|
|
&.columns-4 {columns: 4;}
|
|
|
|
&.columns-2,
|
|
&.columns-3,
|
|
&.columns-4 {
|
|
margin: 1.5rem 0 2.5rem;
|
|
|
|
> *:first-child {margin-top: 0}
|
|
}
|
|
}
|
|
|
|
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
|
|
|
|
@container columns (max-width: 780px) {
|
|
div {
|
|
&.columns-4 {columns: 3;}
|
|
}
|
|
}
|
|
@container columns (max-width: 550px) {
|
|
div {
|
|
&.columns-3,
|
|
&.columns-4 {columns: 2;}
|
|
}
|
|
}
|
|
@container columns (max-width: 350px) {
|
|
div {
|
|
&.columns-2,
|
|
&.columns-3,
|
|
&.columns-4 {columns: 1;}
|
|
}
|
|
}
|
|
|