.articles__filter{display:flex;gap:1rem;flex-wrap:wrap;width:max-content}.filter-articles__item{padding:10px 20px;background-color:#e5e7eb;color:black;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s ease}.filter-articles__item.active,.filter-articles__item:hover{background:linear-gradient(90deg,#3b59a7,#172341);color:white;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.masonry-grid{column-count:3;column-gap:1rem;padding-bottom:2rem}.masonry-item{break-inside:avoid;margin-bottom:1rem;border-radius:10px;overflow:hidden}.image-wrapper img{width:100%;height:auto;display:block;border-radius:10px}@media screen and (max-width:1024px){.masonry-grid{column-count:2}}@media screen and (max-width:640px){.masonry-grid{column-count:1}}@keyframes fadeInSmooth{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.fade-in-on-scroll{opacity:0;transform:translateY(30px);animation:fadeInSmooth .8s ease forwards;animation-delay:0s}@media (prefers-reduced-motion:no-preference){.fade-in-on-scroll{animation-timeline:view();animation-range:entry 10% cover 40%}}.fade-in-on-scroll.is-visible{opacity:1!important;transform:translateY(0)!important}.fade-in-on-scroll:hover{transform:translateY(0) scale(1.03);transition:transform .3s ease}