.latest-blogs {
margin: 80px 0;
}
.blog-list {
display: flex;
flex-wrap: wrap;
padding-top: 30px;
}
.blog-list li {
width: 32%;
margin-right: 20px;
}
.blog-list li a {
display: block;
position: relative;
}
.blog-list li:last-child {
margin-right: 0;
}
.featured-img {
width: 100%;
height: 100%;
max-width: 387px;
margin-bottom: 20px;
transition: 0.3s ease-out;
position: relative;
object-fit: cover;
border-radius: 30px;
overflow: hidden;
}
.featured-img::before {
content: "";
position: absolute;
top: 0;
left: 0;
transform: translate(0);
background: var(--menu-color);
width: 100%;
max-width: 387px;
height: 355px;
border-radius: 30px;
z-index: 1;
opacity: 0.5;
transition: transform 0.3s ease-out;
}
.featured-img:hover::before {
transform: scale(1.1);
}
.featured-img img{
width: 387px;
height: 355px;
border-radius: 30px;
object-fit: cover;
transition: transform 0.3s ease-out;
display: block;
}
.featured-img:hover img {
transform: scale(1.1);
}
.post-content {
position: absolute;
width: 83%;
bottom: 10px;
left: 0;
right: 0;
padding: 25px;
color: var(--txt-secondary-color);
object-fit: cover;
opacity: 1;
z-index: 1;
}
.post-content .post-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 10px;
color: var(--txt-secondary-color);
}
.post-content .post-info {
font-size: 12px;
}
.see-more {
margin: 10px auto;
text-align: center;
}
.see-more-btn {
display: inline-block;
color: var(--txt-primary-color);
text-decoration: none;
text-align: center;
transition: transform 0.3s ease-out;
position: relative;
}
.see-more-btn:hover {
transform: translateX(-10px);
}
.see-more-btn::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 75px;
height: 1px;
background-color: #000;
transition: width 0.3s ease;
}
.see-more-btn:hover::after {
width: 100%;
}
.see-more img {
display: inline-block;
opacity: 0;
transition: transform 0.3s ease-out;
transform: translateX(-10px);
filter: invert(1);
width: 10px;
height: 10px;
}
.see-more-btn:hover img {
opacity: 1;
transform: translateX(5px);
transition: transform 0.3s ease-out;
} @media only screen and (min-width: 768px) and (max-width: 1280px) {
.latest-blogs {
margin: 6.25vw 0;
}
.blog-list {
padding-top: 2.344vw;
}
.blog-list li {
margin-right: 1.563vw;
}
.featured-img {
max-width: 30.234vw;
margin-bottom: 1.563vw;
}
.featured-img::before {
max-width: 30.234vw;
height: 27.734vw;
border-radius: 2.344vw;
}
.featured-img img{
width: 30.234vw;
height: 27.734vw;
border-radius: 2.344vw;
}
.post-content {
bottom: 0.781vw;
padding: 1.563vw;
}
.post-content .post-title {
font-size: 1.875vw;
font-weight: 700;
margin-bottom: 0.781vw;
}
.post-content .post-info {
font-size: 0.938vw;
}
.see-more {
margin: 0.781vw auto;
}
.see-more-btn::after {
bottom: -0.313vw;
width: 5.859vw;
height: 0.078vw;
}
.see-more img {
width: 0.781vw;
height: 0.781vw;
}
} @media all and (max-width: 767.9px) {
.latest-blogs {
margin: 21.333vw 0;
}
.blog-list {
padding-top: 8vw;
flex-direction: column;
}
.blog-list li {
width: 100%;
margin-right: 0;
}
.featured-img {
max-width: 103.2vw;
margin-bottom: 5.333vw;
}
.featured-img::before {
max-width: 103.2vw;
height: 94.667vw;
border-radius: 8vw;
}
.featured-img img{
width: 103.2vw;
height: 94.667vw;
border-radius: 8vw;
}
.post-content {
width: 100%;
bottom: 2.667vw;
padding: 5.333vw;
}
.post-content .post-title {
font-size: 6.4vw;
font-weight: 700;
margin-bottom: 2.667vw;
}
.post-content .post-info {
font-size: 3.2vw;
}
.see-more {
margin: 2.667vw auto;
}
.see-more-btn::after {
bottom: -1.067vw;
width: 20vw;
height: 0.267vw;
}
.see-more img {
width: 2.667vw;
height: 2.667vw;
}
}