#head img { margin: auto; display: block; max-width: 100%; }
#head p { text-align: center; }
#articles .wrapper { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; padding: 0 0 20px; }
#articles .article { width: 440px; padding: 26px; margin: 20px; border-radius: 20px; box-shadow: 0 0 15px rgba(0,0,0,0.5); backdrop-filter: blur(20px); background: radial-gradient(rgba(255,255,255,0.3), rgba(0,0,0,0.1)); }
#articles .article h3 { height: 64px; font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; cursor: pointer; }
#articles .article h3:hover { text-decoration: underline; }
#articles .article p { font-size: 18px; display: block; height: 110px; overflow: hidden; text-overflow: ellipsis; white-space: wrap; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 2; -webkit-box-orient: vertical; }
#articles .article img { width: 100%; height: 340px; border-radius: 16px; object-fit: cover; object-position: center center; margin-bottom: 16px; }
#articles .article .cta-box { margin: 30px auto 20px; text-align: center; }
#articles .pagination { text-align: center; padding: 20px 0 60px; font-size: 24px; display: flex; align-items: center; justify-content: center; }
#articles .pagination a { background: #666; width: 60px; height: 60px; margin: 0 10px; display: flex; align-items: center; justify-content: center; border-radius: 100%; transition: 0.25s; }
#articles .pagination a:hover { text-decoration: none; filter: brightness(70%); }
#articles .pagination a.active { transform: scale(1.2); background: var(--purple); }
#articles .pagination a.prev { -webkit-mask: url('/libraries/Feather/chevron-left.svg') no-repeat; -webkit-mask-size: cover; background: var(--purple); }
#articles .pagination a.next { -webkit-mask: url('/libraries/Feather/chevron-right.svg') no-repeat; -webkit-mask-size: cover; background: var(--purple); }
section#head .title { background: url('/modules/blog/images/logo_background.png') no-repeat; background-size: cover; width: 662px; height: 258px; margin: 20px auto; display: flex; align-items: center; justify-content: center; }

@media (max-width: 1440px) {
#articles .wrapper { padding: 0 60px 20px; }
#articles .article { width: 360px; padding: 26px; margin: 20px; }
#articles .article img { height: 300px; }
#articles .article h3 { font-size: 20px; }
#articles .pagination { text-align: center; padding: 20px 0 60px; font-size: 18px; }
#articles .pagination a {  width: 40px; height: 40px; margin: 0 10px; }
section#head .title { width: 564px; height: 220px; }
}

@media (max-width: 1280px) {
#articles .article { width: 100%; max-width: 500px; }
#articles .wrapper { padding: 0 0px 20px; }
}

@media (max-width: 1024px) {
section#head .title { width: 360px; height: 140px; }
}