.preview-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: $lineheight;
padding-bottom: $lineheight;
@include md() {
grid-template-columns: 1fr 1fr;
}
@include xl() {
grid-template-columns: 1fr 1fr 1fr;
@include xxl() {
grid-template-columns: 1fr 1fr 1fr 1fr;
.preview-list {
@include sm() {
.preview-thumbnail a {
width: 240px;
margin-right: $lineheight /2;
.preview {
display: flex;
align-items: center;
margin-bottom: $lineheight;
@include lg() {
width: 320px;
font-size: 0.8rem;
display:block;
width: 100%;
background-color:transparent;
margin:auto;
object-fit: cover;
padding:0;
line-height:0;
img {
width:100%;
height: auto;
aspect-ratio: 16/9;
border-radius: $card-radius;
.preview h2, .preview-featured h2 {
font-size:1.25rem;
line-height: 1.5rem;
font-family: $titlefont;
font-weight: 800;
height:3rem;
a {
background-color:transparent!important;
color:$color-font;
.preview-excerpt {
margin-top: $lineheight / 2;
font-size:0.8rem;
line-height:1.25rem;
color:transparentize($color-font, 0.2);