/* # MOB 2020 Grid System # last modified October 19, 2020 */
.wo, .wo-stacked, .wo-full {
max-width: 100%; overflow: hidden; position: relative; text-align: center; * { text-align: left; } &.between { align-content: space-around; } .left { justify-self: start; } .right { justify-self: end; } .bottom { align-self: end; } .center { justify-self: center; text-align: center; * { text-align: center; } }
}
.wo, .wo-full {
display: grid; grid-template-columns: repeat($column-count, 1fr); gap: $column-margin + px $column-margin + px; justify-items: stretch; align-items: start;
}
.wo, .wo-stacked, .wo-single {
margin: 20px;
}
.wo-full {
padding: 20px;
}
place-self: start;
}
@media only screen and (min-width: 1200px) {
.l-hide { display: none !important; } // 1920 @for $a from 1 through ($column-count) { @for $b from 1 through ($column-count + 1) { .col-#{$a}-to-#{$b} { grid-column-start: $a; grid-column-end: $b; } } }
}
@media only screen and (min-width: 600px) and (max-width: 1200px) {
// medium .wo, .wo-full { display: grid; grid-template-columns: repeat($column-count-m, 1fr); gap: $column-margin + px $column-margin + px; justify-items: stretch; align-items: start; } .m-hide { display: none !important; } @for $a-m from 1 through ($column-count-m) { @for $b-m from 1 through ($column-count-m + 1) { .m-col-#{$a-m}-to-#{$b-m} { grid-column-start: $a-m; grid-column-end: $b-m; } } }
}
@media only screen and (max-width: 600px) {
// small (mobile) .wo, .wo-full { display: grid; grid-template-columns: repeat($column-count-s, 1fr); gap: $column-margin + px $column-margin + px; justify-items: stretch; align-items: start; } .s-hide { display: none !important; } @for $a-s from 1 through ($column-count-s) { @for $b-s from 1 through ($column-count-s + 1) { .s-col-#{$a-s}-to-#{$b-s} { grid-column-start: $a-s; grid-column-end: $b-s; } } }
}