.post-preview {
display: flex; flex-direction: row; background-color: #FFF; margin-bottom: 32px; border-radius: 10px; border: 1px solid #DDD; overflow: hidden; text-decoration: none; box-shadow: 0 1px 1px 0 rgba(31, 35, 46, 0.15); transition: all .3s ease;
}
.post-preview:hover {
transform: translate(0px, -2px); box-shadow: 0 15px 45px -10px rgba(10, 16, 34, 0.2);
}
.post-preview-image {
width: 25%; > span { width: 100%; height: 100%; display: block; background-size: cover; background-position: 50% 50%; }
}
.post-preview-text {
flex: 1; padding: 10px;
}
.post-preview-title {
color: #3B5998; font-size: 24px; font-weight: bold; display: inline-block;
}
.post-preview-title:hover {
text-decoration: underline;
}
.post-preview-date {
font-size: 12px; line-height: 100%; color: #777;
}
.post-preview-tagline {
margin-top: 16px; font-size: 16px; color: #777;
}