.snip{
display:flex;
gap:var(--gap);
align-items:center;
margin:0 auto var(--gap);
width:var(--pw2);
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
box-shadow:var(--fbs);
border-radius:var(--br1);
padding:var(--gap);
}
.snip:last-of-type{
margin-bottom:0;
}
.snip-img{
width:var(--fpi);
flex-shrink:0;
}
.snip-img-icon{
display:flex;
align-items:center;
justify-content:center;
aspect-ratio:1;
background-color:var(--bg3);
border-radius:var(--br1);
}
.snip-img-icon svg{
width:50%;
height:50%;
}
.snip-img-icon svg path{
fill:var(--cl1);
}
.snip-img img{
width:100%;
height:100%;
object-fit:cover;
border-radius:var(--br1);
display:block;
}
.snip-content{
flex:1;
}
.snip-title{
display:table;
color:var(--lnk);
}
.snip-title:hover{
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:1px;
}
.snip-title h2{
font-family:var(--ff1);
font-weight:640;
font-size:26px;
line-height:38px;
letter-spacing:-.3px;
margin:0;
color:inherit;
}
.excerpt{
margin:4px 0;
color:var(--tx1);
width:100%;
font-size:var(--fz1);
line-height:var(--lh1);
display:-webkit-box;
-webkit-line-clamp:5;
-webkit-box-orient:vertical;
overflow:hidden;
}
.post-info{
margin:2px 0;
font-size:var(--fz1);
font-weight:400;
font-family:var(--ff1);
line-height:var(--lh1);
color:var(--tx3);
}
.post-info .cat{
text-decoration-thickness:1.6px;
text-underline-offset:2px;
color:var(--tx3);
}
.post-info .cat:hover{
color:var(--cl1);
text-decoration:underline;
text-decoration-thickness:1px;
}
.post-info .post-date{
color:inherit;
}
.post-info .post-date:hover{
color:var(--cl1);
text-decoration:underline;
text-decoration-thickness:1px;
}
.snip-comments{
margin:2px 0;
font-size:var(--fz1);
font-weight:400;
font-family:var(--ff1);
line-height:var(--lh1);
color:var(--tx3);
}
.snip-comments:hover{
text-decoration:underline;
text-decoration-thickness:1px;
color:var(--cl1);
}
.snip-hero{
width:var(--pw2);
margin:0 auto var(--gap);
border-radius:var(--br1);
overflow:hidden;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
box-shadow:var(--fbs);
}
.snip-hero-img-link{
display:block;
}
.snip-hero-bg{
width:100%;
height:400px;
background-size:cover;
background-position:center;
border-radius:0 0 var(--br1) var(--br1);
}
.snip-hero-content{
padding:var(--gap);
}
.snip-hero-title-link{
display:block;
text-decoration:none;
}
.snip-hero-title-link:hover .snip-hero-title{
text-decoration:underline;
}
.snip-hero-title{
font-family:var(--ff2);
font-size:36px;
font-weight:700;
line-height:1.28;
margin:0 0 10px;
color:var(--tx1);
}
.snip-hero-excerpt{
font-size:var(--fz1);
line-height:var(--lh1);
margin:0 0 10px;
color:var(--tx2);
display:-webkit-box;
-webkit-line-clamp:5;
-webkit-box-orient:vertical;
overflow:hidden;
}
.snip-hero .post-info{
margin-bottom:10px;
}
.snip-hero .snip-comments{
margin:0;
}