$footer-bp-s: 28em; $footer-bp-m: 60em; .footer { position: relative; font-size: 0.9rem; } .footer-bg { background-color: rgba(indigo, 0.5); } .footer-section { background-color: rgba(indigo, 0.5); } .footer__term { margin: 0 0.5em; } .footer__attr { text-align: center; margin-bottom: 0; font-size: 0.8em; } .footer__body { flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: center; } .footer__body-section { flex: 0 0 100%; margin-bottom: 1.6rem; @media (min-width: $footer-bp-s) { &--narrow { flex: 0 0 50%; } } @media (min-width: $footer-bp-m) { flex: 0 0 60%; margin-bottom: 0; padding: 0 0.8rem; &:first-child { padding-left: 0; } &:last-child { padding-right: 0; } &--narrow { flex: 0 1 20%; } &--m-left-align { text-align: left; .footer__social-list { justify-content: left; } } } } // // reduce padding bottom .reduce-padding { padding-bottom: 8px; @media (min-width: $bp-m) { padding-bottom: 16px; } } .footer__footer { position: relative; font-size: 0.9em; margin-top: 2.4rem; &::before { content: ""; position: absolute; width: 100%; height: 1px; left: 0; top: -1.2rem; background-color: currentColor; opacity: 0.2; } } .footer__heading { font-size: 2.25em; &--small { @include font-body(bold); font-size: 1em; text-transform: uppercase; } } .footer__social-list { font-size: 3em; justify-content: center; }