diff --git a/src/components/page-sections/footer.module.css b/src/components/page-sections/footer.module.css index 51e7ec9..ed1546b 100644 --- a/src/components/page-sections/footer.module.css +++ b/src/components/page-sections/footer.module.css @@ -1,20 +1,37 @@ -.footer { +.container { background-color: var(--footer-color); - padding: 10rem 3rem; - gap: 2rem; display: grid; - place-items: center; + justify-items: space-around; + align-items: center; + min-width: 100%; +} + +.footer { + max-width: 1280px; + width: 100%; + justify-self: center; + padding: 10rem 3rem; + gap: 4rem; + display: grid; + align-items: center; } .orgInfo { text-align: center; + justify-self: center; } .orgInfo * { margin: 1rem 0; } +.links { + justify-self: center; +} .links * { margin: 0.75rem 0; } +.logo { + justify-self: center; +} @media (min-width: 70em) { .footer { @@ -22,6 +39,10 @@ } .orgInfo { text-align: left; + justify-self: end; + } + .logo { + justify-self: right; } .links { justify-self: start; diff --git a/src/components/page-sections/footer.tsx b/src/components/page-sections/footer.tsx index ed31909..d8cb326 100644 --- a/src/components/page-sections/footer.tsx +++ b/src/components/page-sections/footer.tsx @@ -4,11 +4,12 @@ import * as styles from "./footer.module.css" const Footer = () => { return ( -