body{font-family:sans-serif;margin:0;padding:1rem;background-color:#f9f9f9}h1{text-align:center;font-size:1.5rem}.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:1rem 0}.filter-btn{padding:.5rem 1rem;border-radius:20px;background-color:#eee;border:none;cursor:pointer}.filter-btn.active{background-color:#333;color:#fff}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}.card{background-color:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 6px #0000001a;transition:transform .2s ease}.card:hover{transform:translateY(-5px)}.card img{width:100%;height:200px;object-fit:cover;display:block;transition:transform .3s ease}.card:hover img{transform:scale(1.05)}.card-body{padding:.75rem}.card-title{font-weight:700;margin:.5rem 0;font-size:1rem}.card-desc{font-size:.875rem;color:#555}.tags{margin-top:.5rem;font-size:.75rem;color:#777}.card a{display:inline-block;margin-top:.5rem;text-decoration:none;color:#fff;background-color:#333;padding:.5rem 1rem;border-radius:5px;font-size:.875rem}