.blog-categories-list{display:flex;gap:8px;list-style:none;justify-content:center;margin-block:20px}.blog-category-link{color:rgb(71,71,71);text-decoration:none;padding:8px 20px;border-radius:100px;font-size:.8rem;font-weight:700;border:1px solid #dbdada;cursor:pointer;transition:background-color .3s,color .3s,border-color .3s;&:hover{background-color:#d0d0d0;color:#000;border-color:#b0b0b0}}.active{color:#fff;background-color:#353535;&:hover{background-color:#3a3a3a;color:#fff;border-color:#3a3a3a}}.blog-main{max-width:700px;margin:3rem auto;padding:1rem;font-family:Helvetica Neue,sans-serif;text-align:center}.blog-introduce{display:flex;flex-direction:column;gap:1rem;margin-bottom:40px;h1{font-size:1.8rem}p{font-size:1rem;color:#555}}.blog-list{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:.4rem}.blog-item{padding:.6rem;border:1px solid #ddd;border-radius:8px;transition:background-color .2s ease;display:flex;justify-content:space-between;cursor:pointer;align-items:center}.blog-item-content{display:flex;flex-direction:column;text-align:left;flex-grow:1;margin-left:1rem}.blog-item-image{display:flex;align-items:center}.blog-image{width:100px;height:100px;border-radius:8px;object-fit:cover}.blog-item:hover{background-color:#f0f0f0}.blog-title{font-size:1.25rem;font-weight:600;color:#333;text-decoration:none}.blog-meta{font-size:.85rem;color:#666;margin-top:.25rem}