.s-blog-latest {
margin: 60px 0;
}
.s-blog-latest > .container > h2 {
margin-bottom: 30px;
font-size: 36px;
}
.s-blog-latest__card {
overflow: hidden;
border-radius: 5px;
background-color: #27282c;
}
.s-blog-latest__img {
height: 100%;
overflow: hidden;
}
.s-blog-latest__img img {
transition: transform 0.5s;
}
.s-blog-latest__img a {
display: block;
height: 100%;
}
.s-blog-latest__body {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 30px;
}
.s-blog-latest__date {
display: block;
margin-bottom: 12px;
color: #eb6a0c;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
}
.s-blog-latest__body h3 {
margin-bottom: 0;
color: #fff;
font-size: 24px;
font-weight: 500;
line-height: 1.3;
}
.s-blog-latest__body h3 a {
transition: color 0.3s;
}
.s-blog-latest__subtitle {
margin-top: 12px;
margin-bottom: 0;
color: #a2a2a4;
font-size: 15px;
line-height: 1.5;
}
.s-blog-latest__body .btn {
align-self: flex-start;
margin-top: 24px;
}
@media screen and (min-width: 768px) {
.s-blog-latest {
margin: 80px 0;
}
.s-blog-latest__body {
padding: 50px;
}
}
@media screen and (min-width: 1200px) {
.s-blog-latest {
margin: 90px 0;
}
.s-blog-latest__body {
padding: 60px;
}
.s-blog-latest__card:hover .s-blog-latest__img img {
transform: scale(1.03);
}
.s-blog-latest__body h3 a:hover {
color: #d0d0d2;
}
}