cheatsheets/_sass/2017/components/related-posts.scss

50 lines
724 B
SCSS

.related-posts {
& {
@include gutter(margin-top, $multiplier: 4);
padding-top: 16px;
padding-bottom: 16px;
background: $gray-bg;
}
@media (min-width: 481px) {
padding-top: 64px;
padding-bottom: 64px;
}
& > .container {
@include gutter(padding-left);
@include gutter(padding-right);
max-width: $area-width;
margin: 0 auto;
}
}
.related-post-list {
&,
& > li {
margin: 0;
padding: 0;
list-style-type: none;
}
& {
display: flex;
margin: -4px;
flex-wrap: wrap;
}
@media (max-width: 768px) {
flex-wrap: wrap;
}
& > .item {
flex: 1 1 auto;
margin: 4px;
@media (min-width: 481px) {
flex: 1 1 40%;
}
}
}