On small screens the list is on its own line so it doesn't need a margin, while on medium/large screens the padding of its parent element makes the margin unnecessary as well.
27 lines
332 B
SCSS
27 lines
332 B
SCSS
.social {
|
|
@include grid-column;
|
|
text-align: right;
|
|
|
|
@include breakpoint(medium) {
|
|
width: 1 * 100% / 3;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
}
|
|
|
|
li {
|
|
display: inline-block;
|
|
}
|
|
|
|
a {
|
|
font-size: rem-calc(24);
|
|
margin: 0 $line-height / 2;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
@include brand-text;
|
|
}
|
|
}
|
|
}
|