$Tablet-breakpoint: 768px; .footer { display: flex; align-items: center; flex-wrap: wrap; height: var(--footer-height); justify-content: space-between; flex-direction: row; background-color: var(--theme-color-background-header); width: 100%; color: var(--theme-color-components-text-on-dark); font-family: var(--theme-text-body-font-family); padding: 0 0.6rem; font-size: 0.8rem; font-weight: 600; border-top: 1px solid rgba(214, 211, 211, 0.5); a { color: var(--theme-color-components-text-on-dark); text-decoration: none; } .links { column-gap: 2rem; width: auto; display: flex; justify-content: space-between; flex-direction: row; } } @media (max-width: $Tablet-breakpoint) { .footer { font-size: 10px; } }