.featured-blog-post {
position: relative;
display: flex;
.card-clickable {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
article {
display: flex;
flex-flow: row nowrap;
height: 290px;
width: 100%;
border-radius: 12px;
overflow: hidden;
color: var(--alt-color1, #ffffff);
width: 100%;
figure {
width: 50%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.blog-post-card-content {
display: flex;
flex-flow: column nowrap;
flex: 1;
padding: 40px 40px 20px 40px;
max-height: 422px;
gap: 10px;
.blog-post-publish-date {
display: flex;
width: 100%;
height: 20px;
flex-flow: row nowrap;
gap: 8px;
font-size: 14px;
a {
display: -webkit-box;
flex: 1;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-clamp: 1;
overflow: hidden;
cursor: pointer;
word-break: break-all;
text-decoration: underline;
padding: inherit;
background: inherit;
z-index: 2;
}
}
h3 {
margin: 0px;
font-weight: 300;
font-size: 18px;
line-height: 20px;
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 1px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: var(--alt-color1, #ffffff);
}
p {
font-size: 14px;
line-height: 20px;
font-weight: 300;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
.blog-post-preview-actions {
display: flex;
flex: 1;
flex-flow: row nowrap;
width: 100%;
justify-content: flex-end;
align-items: flex-end;
a {
padding: 6px 12px;
font-size: 14px;
line-height: 133%;
border-radius: 8px;
text-decoration: none;
}
}
}
}
}