.l-wrapper { width: 100%; max-width: $wrapper-max-width; margin-left: auto; margin-right: auto; padding-left: $padding-horizontal-xs; padding-right: $padding-horizontal-xs; @media (min-width: $bp-s) { padding-left: $padding-horizontal-s; padding-right: $padding-horizontal-s; } @media (min-width: $bp-m) { padding-left: $padding-horizontal-m; padding-right: $padding-horizontal-m; } @media (min-width: $bp-l) { padding-left: $padding-horizontal-l; padding-right: $padding-horizontal-l; } &--wide { max-width: $wrapper-max-width--wide; } } .l-section-pad { padding-top: $padding-vertical-xs; padding-bottom: $padding-vertical-xs; @media (min-width: $bp-s) { padding-top: $padding-vertical-s; padding-bottom: $padding-vertical-s; } @media (min-width: $bp-m) { padding-top: $padding-vertical-m; padding-bottom: $padding-vertical-m; } @media (min-width: $bp-l) { padding-top: $padding-vertical-l; padding-bottom: $padding-vertical-l; } } // #position .l-absolute { position: absolute; } .l-relative { position: relative; } .l-underlay { z-index: -1; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } // #sizes .l-screen-min-full { width: 100%; min-height: 100vh; } .l-screen-full { width: 100%; height: 100vh; } // #flex .l-flex { display: flex; } .l-flex-center { justify-content: center; align-items: center; } .l-justify-around { justify-content: space-around; } .l-flex-column { flex-direction: column; } .l-flex-row { flex-direction: row; } .l-flex-wrap { flex-wrap: wrap; } .l-flex-2-col-m { display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; flex-wrap: wrap; > * { flex: 0 0 100%; @media (min-width: $bp-m) { flex: 0 0 50%; } } } .l-flex-list-col { display: flex; flex-direction: column; justify-content: center; padding-left: 0; list-style: none; margin: 0; } .l-flex-list-row { display: flex; flex-direction: row; justify-content: center; padding-left: 0; list-style: none; margin: 0; } .l-list-bare { list-style: none; padding-left: 0; margin: 0; }