.l-wrapper { width: 100%; max-width: 70rem; margin-left: auto; margin-right: auto; padding-left: 8px; padding-right: 8px; @media (min-width: $bp-s) { padding-left: 32px; padding-right: 32px; } @media (min-width: $bp-m) { padding-left: 64px; padding-right: 64px; } @media (min-width: $bp-l) { padding-left: 96px; padding-right: 96px; } &--wide { max-width: 110rem; } } .l-section-pad { padding-top: 24px; padding-bottom: 24px; @media (min-width: $bp-s) { padding-top: 32px; padding-bottom: 32px; } @media (min-width: $bp-m) { padding-top: 64px; padding-bottom: 64px; } @media (min-width: $bp-l) { padding-top: 96px; padding-bottom: 96px; } // reduce padding bottom &--pb-reduce { padding-bottom: 8px; @media (min-width: $bp-m) { padding-bottom: 16px; } } } .l-section-header { font-size: 2.875rem; line-height: 1.2; text-align: center; margin-bottom: 3.75rem; } // #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-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; }