.container { max-width: 980px; margin: 0 auto; padding: 0 10px; } @mixin grid($value) { flex: 0 0 $value; max-width: $value; } .grid { display: flex; flex: 1; flex-wrap: wrap; &.grid--no-wrap { flex-wrap: nowrap; } &.grid--align-center { align-items: center; } &.grid--justify-end { justify-content: flex-end; } &.grid--space { justify-content: space-between; } &.grid--evenly { justify-content: space-evenly; } &.grid--out { margin-right: -10px; margin-left: -10px; } &.grid--column { flex-direction: column; } } .grid__head--sticky { position: sticky; z-index: $z-index__sticky; top: 0; } header.has-user-notification + section .grid__head--sticky { top: 124px; } .grid-cell { padding-right: 10px; padding-left: 10px; &.grid-cell--noMargin { margin-bottom: 0; } } .grid-cell--col1 { @include grid(8.3334%); } .grid-cell--col2 { @include grid(16.6667%); } .grid-cell--col3 { @include grid(25%); } .grid-cell--col4 { @include grid(33.3334%); } .grid-cell--col5 { @include grid(41.6665%); } .grid-cell--col6 { @include grid(50%); } .grid-cell--col7 { @include grid(58.3331%); } .grid-cell--col8 { @include grid(66.6666%); } .grid-cell--col9 { @include grid(75%); } .grid-cell--col10 { @include grid(83.333%); } .grid-cell--col11 { @include grid(91.6666%); } .grid-cell--col12 { @include grid(100%); } @media (max-width: $layout-tablet) { .grid-cell--col1--tablet { @include grid(8.3334%); } .grid-cell--col2--tablet { @include grid(16.6667%); } .grid-cell--col3--tablet { @include grid(25%); } .grid-cell--col4--tablet { @include grid(33.3334%); } .grid-cell--col5--tablet { @include grid(41.6665%); } .grid-cell--col6--tablet { @include grid(50%); } .grid-cell--col7--tablet { @include grid(58.3331%); } .grid-cell--col8--tablet { @include grid(66.6666%); } .grid-cell--col9--tablet { @include grid(75%); } .grid-cell--col10--tablet { @include grid(83.333%); } .grid-cell--col11--tablet { @include grid(91.6666%); } .grid-cell--col12--tablet { @include grid(100%); } } @media (max-width: $layout-mobile) { .grid-cell--col1--mobile { @include grid(8.3334%); } .grid-cell--col2--mobile { @include grid(16.6667%); } .grid-cell--col3--mobile { @include grid(25%); } .grid-cell--col4--mobile { @include grid(33.3334%); } .grid-cell--col5--mobile { @include grid(41.6665%); } .grid-cell--col6--mobile { @include grid(50%); } .grid-cell--col7--mobile { @include grid(58.3331%); } .grid-cell--col8--mobile { @include grid(66.6666%); } .grid-cell--col9--mobile { @include grid(75%); } .grid-cell--col10--mobile { @include grid(83.333%); } .grid-cell--col11--mobile { @include grid(91.6666%); } .grid-cell--col12--mobile { @include grid(100%); } }