.blog-toolbar{display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:space-between;padding:2rem 1rem;border-bottom:1px solid rgba(255,255,255,.1)}
@media(min-width:768px){.blog-toolbar{flex-direction:row}}
.blog-search{position:relative;width:100%;max-width:24rem}
.blog-search svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;color:rgba(255,255,255,.4)}
.blog-search input{padding-left:3rem}
.blog-cats{display:flex;flex-wrap:wrap;gap:.5rem}
.blog-cat{padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:500;transition:all .3s;border:none}
.blog-cat.active{background:var(--gold);color:var(--green)}
.blog-cat:not(.active){background:rgba(255,255,255,.05);color:rgba(255,255,255,.7)}
.blog-cat:not(.active):hover{background:rgba(201,166,70,.1);color:var(--gold)}
.blog-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:768px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.blog-card{overflow:hidden;display:block}
.blog-card-img{position:relative;height:12rem;overflow:hidden}
.blog-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .blog-card-img img{transform:scale(1.1)}
.blog-card-img .badge{position:absolute;top:1rem;left:1rem}
.blog-card-body{padding:1.5rem}
.blog-meta{display:flex;gap:1rem;font-size:.875rem;color:rgba(255,255,255,.5);margin-bottom:.75rem}
.blog-meta span{display:flex;align-items:center;gap:.25rem}
.blog-meta svg{width:1rem;height:1rem}
.blog-card-body h2{font-size:1.25rem;font-weight:600;margin-bottom:.75rem;transition:color .3s}
.card:hover .blog-card-body h2{color:var(--gold)}
.blog-card-body>p{color:rgba(255,255,255,.6);font-size:.875rem;margin-bottom:1rem}
.blog-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1)}
.blog-card-footer .author{display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.6);font-size:.875rem}
.blog-card-footer .author svg{width:1rem;height:1rem;color:var(--gold)}
.blog-card-footer .more{color:var(--gold);font-size:.875rem;font-weight:500;display:flex;align-items:center;gap:.25rem}
.blog-card-footer .more svg{width:1rem;height:1rem}