qdouze2-wordpress-theme/scss/custom/_featured.scss

48 lines
1.1 KiB
SCSS

#featured-articles {
display:grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: $lineheight;
padding-bottom: $lineheight;
@include lg() {
grid-template-columns: 1fr 1fr 1fr;
}
}
.preview-featured {
font-size: 0.8rem;
.preview-link {
display: block;
padding:0;
border-radius: $card-radius;
overflow: hidden;
.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);
}
}
}