.blog-layout{grid-template-columns:repeat(4,1fr);justify-content:space-between;gap:30px;margin:20px 0 50px;display:grid}.blog-layout .blog-item{cursor:pointer;border:1px solid var(--grey220);border-start-start-radius:50%;border-start-end-radius:50%;border-end-end-radius:8px;border-end-start-radius:8px;transition:all .5s}.blog-layout .blog-item:hover{transform:scale(1.05)}.blog-layout .blog-item:hover .bottom-blog button,.blog-layout .blog-item:hover .blog-top p{background-color:var(--white);color:var(--primary)}.blog-item .blog-top{border:1px solid var(--grey220);background-position:50%;background-repeat:no-repeat;background-size:cover;border-start-start-radius:50%;border-start-end-radius:50%;align-items:end;width:100%;height:250px;padding:10px;display:flex}.blog-item .blog-top p{background-color:var(--primary);color:var(--white);border-radius:4px;padding:2px 5px;font-size:12px;transition:all .5s}.blog-item .blog-top p:hover{background-color:var(--secondary);color:var(--primary)}.blog-item .bottom-blog{background-color:var(--secondary);border:none;border-end-end-radius:8px;border-end-start-radius:8px;flex-direction:column;gap:10px;padding:10px;display:flex}.blog-item .bottom-blog .blog-time{color:var(--primary);align-items:center;gap:2px;font-size:12px;display:flex}.blog-item .bottom-blog p.psize{font-weight:700}.blog-item .bottom-blog button{background-color:var(--primary);border:1px solid var(--grey220);color:var(--white);border-radius:4px;align-self:flex-end;margin-bottom:10px;padding:2px 6px;font-size:12px;transition:all .5s}.blog-item .bottom-blog button:hover{background-color:var(--white);color:var(--primary)}@media (width<=1150px){.blog-layout{grid-template-columns:repeat(3,1fr)}}@media (width<=992px){.blog-layout{grid-template-columns:repeat(2,1fr)}}@media (width<=600px){.blog-layout{grid-template-columns:repeat(1,100%)}}.blog-filter-bar{background-color:var(--secondary);border:1px solid var(--grey220);border-radius:8px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;padding:12px;display:flex}.blog-search-box{background-color:var(--white);border:1px solid var(--grey220);border-radius:50px;grid-template-columns:1fr auto;align-items:center;width:100%;max-width:340px;height:38px;display:grid;overflow:hidden}.blog-search-box input{background:0 0;border:none;outline:none;width:100%;height:100%;padding:0 15px;font-size:13px}.blog-search-box button{background-color:var(--primary);height:100%;color:var(--white);cursor:pointer;border:none;align-items:center;padding:0 16px;transition:all .4s;display:flex}.blog-search-box button:hover{background-color:var(--secondary);color:var(--primary)}.blog-filter-left{align-items:center;gap:12px;display:flex}.blog-filter-left .blog-count{color:gray;white-space:nowrap;font-size:13px}.blog-filter-left select{color:var(--primary);border:1px solid var(--grey220);background-color:var(--white);cursor:pointer;border-radius:4px;outline:none;padding:5px 8px}