.lastPosts {
width: 100%;
margin: 70px 0;
}
.lastPosts h2 {
font-size: var(--fontSizeH4);
text-transform: uppercase;
margin: 0;
}
.lastPosts ul {
width: 100%;
gap: 40px;
margin: 0;
margin-top: 70px;
padding: 0;
align-items: flex-start;
}
.lastPosts ul li {
width: 25%;
}
.lastPosts ul li a {
width: 100%;
border-radius: 6px;
background-color: var(--white);
transition: all var(--transition05);
text-decoration: none;
}
.lastPosts ul li a:hover,
.lastPosts ul li a:focus {
background-color: var(--black);
}
.lastPosts ul li a figure {
position: relative;
width: 100%;
height: auto;
aspect-ratio: 16/9;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
overflow: hidden;
}
.lastPosts ul li a figure img.wp-post-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: all var(--transition05);
}
.lastPosts ul li a:hover figure img.wp-post-image,
.lastPosts ul li a:focus figure img.wp-post-image {
transform: scale(1.2);
}
.lastPosts__content {
width: calc(100% - 80px);
padding: 40px;
align-items: flex-start;
}
.lastPosts ul li a h3 {
font-size: var(--fontSizeP2);
font-weight: 700;
margin: 0;
margin: 0 0 10px 0;
}
.lastPosts ul li a p {
font-size: 16px;
font-weight: 400;
margin: 0;
color: var(--grey);
}
.lastPosts__content__date {
display: none;
font-size: 16px;
font-weight: 400;
margin-top: 10px;
color: var(--grey);
}
.lastPosts__content__date img {
width: 16px;
height: 16px;
object-fit: contain;
}
.lastPosts__content__date time {
margin-left: 5px;
font-style: italic;
}
.lastPosts ul li a:hover h3,
.lastPosts ul li a:focus h3,
.lastPosts ul li a:hover p,
.lastPosts ul li a:focus p,
.lastPosts ul li a:hover .lastPosts__content__date,
.lastPosts ul li a:focus .lastPosts__content__date {
color: var(--white);
}
.lastPosts .button {
margin-top: 20px;
}
@media (max-width: 1280px) {
.lastPosts ul {
gap: 20px;
flex-flow: wrap;
}
.lastPosts ul li {
width: calc(50% - 20px);
}
}
@media (max-width: 900px) {
.lastPosts__content {
width: calc(100% - 40px);
padding: 20px;
}
}
@media (max-width: 600px) {
.lastPosts {
margin: 30px 0;
}
.lastPosts ul {
gap: 20px 10px;
}
.lastPosts ul li {
width: calc(100% - 20px);
max-width: 350px;
}
}