app/assets/stylesheets/global/_layout.scss
.main-content {
@media (min-width: $screen-sm-min) {
min-height: 300px;
.section-header + & {
min-height: 100px;
}
}
@media (min-height: 750px) {
min-height: 480px;
.section-header + & {
min-height: 200px;
}
}
@media (min-width: 1500px) {
min-height: 600px;
.section-header + & {
min-height: 400px;
}
}
@media (min-width: 1800px) {
min-height: 800px;
.section-header + & {
min-height: 600px;
}
}
}
.wide-section {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
max-width: 75em;
}
.grid-list {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
text-align: center;
}
.grid-list-module {
font-size: $font-size-base;
display: inline-block;
width: 80%;
margin: 0 auto;
@media (min-width: 18em) {
width: 50%; // 6/12
margin: 0;
}
@media (min-width: 30em) {
width: 33.3333%; // 4/12
}
@media (min-width: $screen-sm-min) {
width: 25%; // 3/12
}
@media (min-width: $screen-md-min) {
width: 16.6666%; // 2/12
}
a {
padding: .5em;
display: block;
height: auto;
@media (min-width: 30em) {
padding: 1em;
}
}
}
.thin-page {
margin-right: auto;
margin-left: auto;
max-width: 26em;
}
.single-message {
margin-top: 45px;
@media (min-width: $screen-md-min) {
margin-top: 75px;
}
}