.blog-posts {
padding: 180px 0 100px;
}
.blog-posts__list {
margin-top: 60px;
display: flex;
flex-wrap: wrap;
gap: 34px 30px;
}
.blog-card {
width: calc((100% - 60px) / 3);
border-radius: 10px;
box-shadow: 0px 2px 30px 0px rgba(104, 104, 104, 0.14);
transition: transform 0.2s;
}
.blog-card:hover {
transform: translateY(-20px);
}
.blog-card:hover .blog-card__title {
color: var(--color-green-dark);
}
.blog-card__link {
display: flex;
flex-direction: column;
border-radius: inherit;
overflow: hidden;
}
.blog-card__img {
width: 100%;
position: relative;
aspect-ratio: 1/0.4829;
background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc2IiBoZWlnaHQ9IjE1NyIgdmlld0JveD0iMCAwIDE3NiAxNTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJpY29uLXBhcmstb3V0bGluZTpsZWF2ZXMiIGNsaXAtcGF0aD0idXJsKCNjbGlwMF82M18xMzUyOCkiPgo8ZyBpZD0iR3JvdXAiPgo8cGF0aCBpZD0iVmVjdG9yIiBkPSJNODUuMjUgMTQzLjI1Qzg1LjI1IDE0My4yNSA0OS41IDE0NiAzMC4yNSAxMjRDMTEgMTAyIDExIDM2IDExIDM2QzExIDM2IDc3IDMzLjI1IDk5IDQ5Ljc1QzEyMSA2Ni4yNSAxMTUuNSAxMTMgMTE1LjUgMTEzIiBzdHJva2U9IndoaXRlIiBzdHJva2Utb3BhY2l0eT0iMC40IiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBpZD0iVmVjdG9yXzIiIGQ9Ik0xMjEgMTQ2QzEyMSAxNDYgOTAuMjU1IDEyMi43NjUgNzEuNSAxMDJNNzEuNSAxMDJDNTIuNzQ1IDgxLjIzMiA0NCA2MC43NSA0NCA2MC43NU03MS41IDEwMkw3NC4yNSA2Ni4yNU03MS41IDEwMkw0NCA5OS4yNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLW9wYWNpdHk9IjAuNCIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZyBpZD0iR3JvdXBfMiI+CjxwYXRoIGlkPSJWZWN0b3JfMyIgZD0iTTEyNy4wNzggNTQuNDE2NkMxMjcuMDc4IDU0LjQxNjYgMTIwLjIwMyA0MC4zNjE3IDEyNi4wMjQgMjkuMDEwOUMxMzEuODQ1IDE3LjY2MDIgMTU4LjYxIDcuMDI3NjkgMTU4LjYxIDcuMDI3NjlDMTU4LjYxIDcuMDI3NjkgMTcwLjM1OCAzMy4zNTAxIDE2Ny4yMSA0NC45MzAxQzE2NC4wNjMgNTYuNTEgMTQ0LjIxOCA2MS44MTA5IDE0NC4yMTggNjEuODEwOSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLW9wYWNpdHk9IjAuMiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggaWQ9IlZlY3Rvcl80IiBkPSJNMTMxLjcyMSA2OS4zNTY1QzEzMS43MjEgNjkuMzU2NSAxMzYuMTkxIDUzLjE0NTIgMTQxLjU5IDQyLjE5NDFNMTQxLjU5IDQyLjE5NDFDMTQ2Ljk5MSAzMS4yNDI1IDE1My44ODkgMjQuMzk2NSAxNTMuODg5IDI0LjM5NjVNMTQxLjU5IDQyLjE5NDFMMTU2LjUzMSAzNy41NU0xNDEuNTkgNDIuMTk0MUwxMzguMjc1IDMwLjU5ODgiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1vcGFjaXR5PSIwLjIiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF82M18xMzUyOCI+CjxyZWN0IHdpZHRoPSIxNzYiIGhlaWdodD0iMTU3IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo="),
linear-gradient(0deg, rgba(223, 237, 207, 0.7) 0%, rgba(223, 237, 207, 0.7) 100%),
linear-gradient(180deg, rgba(222, 247, 199, 0.8) 0%, rgba(137, 186, 69, 0.8) 100%);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.blog-card__img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-card__text {
padding: 30px 20px;
font: 16px/1.4 var(--font-secondary);
}
.blog-card__time {
display: block;
margin-bottom: 10px;
color: #767a78;
}
.blog-card__title {
font-size: 20px;
font-weight: 500;
line-height: 1.4;
transition: color 0.2s;
}
.posts-nav {
margin-top: 60px;
}
.posts-nav__list {
display: flex;
justify-content: center;
align-items: center;
font: 500 16px/1 var(--font-secondary);
color: var(--color-black);
}
.posts-nav__item {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.posts-nav__link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
}
.posts-nav__item.current .posts-nav__link {
background-color: var(--color-orange);
color: var(--color-white);
}
.posts-nav__item.first .posts-nav__link,
.posts-nav__item.last .posts-nav__link {
background-color: #f5f6f5;
color: var(--color-black);
}
.posts-nav__item.double { }
.posts-nav__item.first::after,
.posts-nav__item.last::before {
content: "...";
display: inline-block;
}
@media screen and (max-width: 1440px) {
.blog-posts__list {
margin-top: 50px;
}
}
@media screen and (max-width: 1280px) {
.blog-posts {
padding: 130px 0 70px;
}
.blog-card {
width: calc((100% - 60px) / 2);
}
}
@media screen and (max-width: 768px) {
.blog-posts {
padding: 90px 0 60px;
}
.blog-posts__list {
gap: 25px;
margin-top: 25px;
}
.blog-card {
width: 100%;
}
}