.contentinfo { @include padding-leader(2); @include padding-trailer(2); color: $color-text-weak; * { vertical-align: middle; } .container { @include leading-border; @include padding-trailer; border-color: $color-border; } ul { @include font-size-small; } 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 at-breakpoint($tablet-large) { .contentinfo { padding: { top: 0; bottom: 0; } height: $sticky-contentinfo-height; .container { @extend %table-layout-tablet-large; text-align: left; } ul { display: table-row; height: 100%; } } .contentinfo-legal, .contentinfo-tools, .contentinfo-social { @extend %table-layout-cell-tablet-large; } .contentinfo-tools, .contentinfo-social { padding: 0 0 0 ($gutter-width * 2); width: 1px; white-space: nowrap; } .contentinfo-social { @include adjust-leading-to(1, $font-size-small); } }