.contentinfo { @include padding-leader; @include padding-trailer; color: $color-text-weak; .container { @include padding-leader; @include padding-trailer; height: 100%; } ul { @include font-size-small; @include adjust-leading-to(1); } p { @include padding-trailer(.25); margin: { right: 0; left: 0; } &:last-child { padding-bottom: 0; } } a { color: $color-text; &:hover, &:focus { color: $color-text-strong; } } } .contentinfo-tools, .contentinfo-social { @include padding-leader($font-size: $font-size-small); } .contentinfo-tools ul { @extend %horizontal-list; font-size: 1em; } @include breakpoint($tablet-large) { .contentinfo { padding: { top: 0; bottom: 0; } height: $sticky-contentinfo-height; .container { text-align: left; } ul { @extend %table-layout-tablet-large; } li { @extend %table-layout-cell-tablet-large; } } .contentinfo-tools, .contentinfo-social { padding: 0; width: 1px; white-space: nowrap; } .contentinfo-tools ul li { display: table-cell; margin: 0; padding-left: 2em; } .contentinfo-social { padding-left: 4em; line-height: 0; } }