.preview-featured { font-size: 0.8rem; padding: $lineheight / 3; .preview-link { display: block; padding:0; border-radius: $card-radius; overflow: hidden; text-decoration: none; .preview-item { width: 100%; height: auto; aspect-ratio: 16 / 9; background-size:100% auto; background-position: center center; transition: background-size .5s; &:hover { background-size: 120% auto; } } } .preview-overlay { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; height:100%; color: white !important; background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%); padding:$lineheight / 8; h2 { text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); } } }