diff --git a/src/style/organisms/_footer.scss b/src/style/organisms/_footer.scss index 9609b48..c8e97cf 100644 --- a/src/style/organisms/_footer.scss +++ b/src/style/organisms/_footer.scss @@ -2,7 +2,7 @@ position: relative; z-index: 200; background-color: $color-primary-darker; - padding: 40px 0; + padding: 24px 0 40px; @include bp (md) { padding: 0; @@ -20,9 +20,9 @@ // Site title &__title { - grid-column: 1 / span 4; + grid-column: 1 / -1; display: block; - margin-bottom: 40px; + margin: 0 auto 40px; text-decoration: none; @include bp (sm) { @@ -45,41 +45,49 @@ // Links &__links { - grid-column: 5 / span 3; - margin-left: auto; + grid-column: 1 / -1; + margin: 0 auto; @include bp (sm) { - grid-column: 5 / span 19; + grid-column: 6 / span 18; + width: 100%; grid-row: 1; - margin-left: auto; margin-top: 0.15em; } ul { @include bp (sm) { display: flex; - justify-content: center; + justify-content: flex-end; } } li { display: block; - margin-bottom: 16px; @include bp (sm) { - margin: 0 12px; + margin-left: 12px; } @include bp (md) { - margin: 0 16px; + margin-left: 16px; } - &:last-child { - margin-bottom: 0; + &:not(:last-child) { + margin-bottom: 12px; + + @include bp (sm) { + margin-right: 12px; + margin-bottom: 0; + } + @include bp (md) { + margin-right: 16px; + } } } a { position: relative; display: flex; align-items: center; + justify-content: center; color: #fff; text-decoration: none; font-size: rem(14px); @@ -88,6 +96,7 @@ @include bp (md) { font-size: rem(16px); + justify-content: flex-end; } } svg {