.b-top-posts {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 1.875rem;
}
@media (min-width: 768px) {
.b-top-posts {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.b-top-posts {
grid-template-columns: repeat(3, 1fr);
}
}
.b-top-posts__article {
margin-bottom: 2rem;
}
.b-top-posts__article > a {
display: flex;
overflow: hidden;
border-radius: 0.625rem;
}
.b-top-posts__article > a:hover .b-top-posts__featured-image,
.b-top-posts__article > a:focus .b-top-posts__featured-image {
transform: scale(1.1);
}
.b-top-posts__featured-image {
width: 100%;
height: auto;
aspect-ratio: 362/226;
object-fit: cover;
transition: transform 300ms ease-in-out;
}
.b-top-posts__meta {
font-size: var(--wp--preset--font-size--x-small);
font-weight: 400;
color: var(--wp--preset--color--grey-1);
margin-top: 1rem;
margin-bottom: 1rem;
}
.b-top-posts__separator {
margin-inline: 0.8rem;
}
.b-top-posts__title {
margin-bottom: 0.75em;
}
.b-top-posts__title a {
text-decoration: none;
color: var(--wp--preset--color--black);
line-height: 1;
font-size: var(--wp--preset--font-size--medium);
font-weight: 400;
transition: color 300ms ease-in-out;
}
.b-top-posts__title a:hover,
.b-top-posts__title a:focus {
color: var(--wp--preset--color--blue-1);
}
.b-top-posts__excerpt {
max-height: calc(3* 1.5em);
max-height: calc(3* 1lh);
display: -webkit-box !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}