.blog-post-list {
position: relative;
display: flex;
flex-flow: column nowrap;
}
.blog-post-list-posts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.card-clickable {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.blog-post-list-post {
position: relative;
display: flex;
flex-flow: column nowrap;
height: 312px;
width: 234px;
background: #ffffff;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
&:has(.card-clickable:focus-visible){
outline: 2px solid rgba(0,0,0,0.12);
}
&:hover {
outline: 2px solid rgba(0,0,0,0.12);
}
figure {
height: 132px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.blog-post-details {
display: flex;
flex-flow: column nowrap;
padding: 20px;
gap: 10px;
flex: 1;
overflow: hidden;
.blog-post-meta {
display: flex;
width: 100%;
flex-flow: row nowrap;
gap: 4px;
word-break: break-all;
line-height: 20px;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
.blog-post-meta-category {
display: -webkit-box;
flex: 1;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-clamp: 1;
overflow: hidden;
a {
z-index: 2;
position: relative;
}
.btn-link {
color: var(--cta-background-color);
}
}
}
.blog-post-title h3 {
display: -webkit-box;
font-size: 18px;
line-height: 20px;
letter-spacing: 1px;
margin: 0px;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
word-break: break-word;
overflow: hidden;
}
.blog-post-content {
flex: 1;
overflow: hidden;
word-break: break-word;
}
.blog-post-content p {
margin: 0px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
line-height: 20px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 9;
}
}
&:has(figure) .blog-post-content p {
-webkit-line-clamp: 3!important;
}
}