footer{a { color: var(--white); text-decoration: none; } >.max-container { display: grid; gap: var(--hspace-s-l) var(--gg); grid-template-columns: 1fr; grid-template-rows: auto; > img { grid-column: 1; grid-row: 2; height: auto; max-height: 11.25rem; max-width: 12.5rem; place-self: end; width: auto; } } .subscribe { small { color: var(--colour-2); display: block; margin-top: -.75rem; } form { border-bottom: 1px solid var(--white); display: flex; margin: 1.5rem 0; max-width: 30rem; &:has(input[type="email"]:focus, button:focus) { border-bottom: 1px solid var(--colour-1); } } input[type="email"] { background-color: transparent; border: 0; color: var(--white); font-size: 1rem; font-weight: 160; padding-bottom: .5rem; width: 100%; &:focus { outline: none; } } button { appearance: none; background-color:transparent; border: 0; color: var(--white); cursor: pointer; font-family: system-ui; font-size: 1.5rem; font-weight: 160; margin: 0; padding: 0 0 .5rem 1rem; &:focus, &:hover { color: var(--colour-1); outline: none; transition: all .2s ease; } } img { height: 2.5rem; width: 2.5rem; } a { display: inline-block; + a { margin-left: 1rem; } } } nav { grid-column: 1; grid-row: 2; ul { font-weight: 400; line-height: 3rem; margin: 0; } a { &:hover { color: var(--colour-2); } } } .copyright { background-color: var(--dark-2); color: var(--colour-2); margin-top: var(--hspace-s-l); .max-container { display: flex; height: 4.125rem; justify-content: space-between; place-items: center; } } .logo a { display: block; margin: 0 -.25rem 0 0; padding: .25rem; svg { fill: currentColor; height: 2.313rem; width: 2.313rem; } } @media (min-width: 37.5rem) { form { width: 80%; } } @media (min-width: 56.25em) { >.max-container { grid-template-columns: repeat(12,1fr); > img { grid-column: 10 / 13; grid-row: 1; max-height: 11rem; max-width: 100%; } } .subscribe { grid-column: 1 / 5; } nav { grid-column: 6 / 10; grid-row: 1; } }}