41 lines
703 B
SCSS
41 lines
703 B
SCSS
/* ---------------------------- */
|
|
/* ==Layout classes */
|
|
/* ----------------------------- */
|
|
|
|
/* Global container */
|
|
.layout-maxed {
|
|
display: grid;
|
|
|
|
@each $key,
|
|
$value in $breakpoints {
|
|
@media (min-width: #{$value}) {
|
|
grid-template-columns:
|
|
minmax($spacer-small, 1fr)
|
|
minmax(auto, $value)
|
|
minmax($spacer-small, 1fr);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Center all children */
|
|
.layout-maxed > * {
|
|
grid-column: 2;
|
|
}
|
|
|
|
/* Hero box */
|
|
.layout-hero {
|
|
grid-column: 1 / -1;
|
|
display: grid;
|
|
grid-template-columns: inherit;
|
|
}
|
|
|
|
.layout-hero > * {
|
|
grid-column: 2;
|
|
}
|
|
|
|
/* Hero image */
|
|
.layout-hero-img {
|
|
grid-column: 1 / -1;
|
|
justify-self: center;
|
|
max-width: 100%;
|
|
} |