1
0
Fork 0
blog/src/components/molecules/RelatedPosts.module.scss

73 lines
974 B
SCSS

@import 'variables';
@import 'mixins';
.title {
font-size: $font-size-h3;
margin-bottom: $spacer;
}
.relatedPosts {
margin-top: -($spacer * 2);
@media (min-width: $screen-md) {
@include breakoutviewport;
}
ul {
display: grid;
gap: $spacer / 2;
grid-template-columns: repeat(2, 1fr);
padding: 0;
margin: 0;
@media (min-width: $screen-sm) {
grid-template-columns: repeat(3, 1fr);
gap: $spacer;
}
}
li {
display: block;
margin: 0;
&::before {
display: none;
}
}
figure {
margin: 0;
}
img {
margin-bottom: 0;
}
a {
display: block;
> div {
margin-bottom: 0;
}
h4 {
color: $text-color-light;
}
&:hover,
&:focus {
h4 {
color: $link-color;
}
}
}
}
.button {
font-size: $font-size-mini;
display: inline-block;
color: $brand-grey-light;
text-transform: uppercase;
margin-left: $spacer / 2;
}