@import "colors"; @import "constants"; @import "mixins"; @import "placeholders"; .footer { @include vertical-padding(72px); background-color: $light-grey; border-top: 1px solid $border-grey; } .footer-inner-content { width: $page-width; margin: 0 auto; } .footer-columns { @extend %horizontal-list; } $footer-column-width: 320px; $footer-column-count: 3; .footer-column { @extend %horizontal-list-item; width: $footer-column-width; margin-right: calc((#{$page-width} - (#{$footer-column-width} * #{$footer-column-count})) / (#{$footer-column-count} - 1)); font-size: 14px; vertical-align: top; } .footer-logos, .footer-links { list-style-type: none; padding: 0; margin: 0; } .footer-link { margin-bottom: 14px; &:last-of-type { margin-bottom: 0; } } .footer-logo:hover { opacity: 0.8; } .footer-logo-rf { width: 75px; margin-bottom: 14px; } .footer-logo-beta-gouv-fr { width: 190px; } .footer-link a { color: $black; text-decoration: none; &:hover, &:focus { color: $blue; text-decoration: none; } }