.blog-list {
margin-top: 20px;
}
.blog-item {
display: flex;
align-items: center;
}
.blog-item+.blog-item {
margin-top: 20px;
}
.blog-pic {
border-radius: 20px;
width: 235px;
height: 150px;
}
.blog-rightBox {
padding-left: 20px;
}
.blog-title {
font-size: 20px;
font-weight: 600;
margin-top: 15px;
margin-bottom: 8px;
}
.blog-title-link {
color: #474747;
text-decoration: none;
}
.blog-excerpt {
font-weight: 400;
margin-bottom: 25px;
font-size: 16px;
color: #4d4d4d;
}
@media (max-width: 767px) { .blog-item {
}
.blog-pic {
width: 180px;
height: 135px;
}
.blog-title {
font-size: 18px;
margin-top: 10px;
}
.blog-date,
.blog-views {
font-size: 14px;
}
.blog-excerpt {
font-size: 15px;
margin-bottom: 20px;
}
}
@media (max-width: 530px) { .blog-item {
flex-direction: column;
align-items: normal;
padding: 0px;
}
.blog-pic {
height: 175px;
width: 100%;
margin-bottom: 12px;
border-radius: 20px 20px 0px 0px;
}
.blog-leftBox {
margin-left: 0px;
}
.blog-rightBox {
border-top: 0;
border-left: auto;
padding: 0px;
border-radius: 0px 0px 10px 10px;
padding: 15px;
padding-top: 0;
}
}
@media (max-width: 480px) {
.blog-title {
font-size: 16px;
}
.blog-excerpt {
font-size: 14px;
}
}