Recent Posts widget - custom
No comments
/******************************************
Recent Posts
******************************************/
.recent-posts-footer {margin: 25px 0;}
.recent-posts { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; }
.recent-item { width: calc(33.3333% - 10px); display: flex; flex-direction: column; justify-content: space-between; margin-top: 15px;}
.recent-thumb-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; height: 150px; overflow: hidden; }
.recent-thumb { width: 100%; height: 150px; object-fit: cover; display: block; }
.recent-item h3 {line-height: 1.3; margin: 10px 0; font-size: 16px;}
.recent-item p { flex-grow: 1; line-height: 1.4; }
.recent-item a.read-more { align-self: flex-start; display: inline-block; margin-top: 5px; margin-bottom: 10px; padding: 5px 10px 5px 0; text-transform: capitalize !important; outline: none; font: $(aside.font); }
@media only screen and (max-width: 765px) {
.recent-item { width: calc(50% - 10px); }
}
@media only screen and (max-width: 575px) {
.recent-item { width: 100%; }
}
