.main-blog{padding-bottom:7.5rem}
.main-blog .hero{padding:3.25rem 0;text-align:center}
.main-blog .hero h1{font-size:var(--font-size-5xl);font-weight:700}
.main-blog .filters{display:-webkit-box;display:-ms-flexbox;display:flex;gap:1.5rem;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:2.25rem;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}
.main-blog .filter-btn{background:var(--color-bg-dark-200);border:none;color:var(--color-text-200);padding:0.5rem 1rem;border-radius:2rem;cursor:pointer;font-size:var(--font-size-md);-webkit-transition:all 0.3s;transition:all 0.3s;font-weight:700}
.main-blog .filter-btn.active{background:var(--color-primary);color:var(--color-bg-dark-100)}
.main-blog .filter-btn:hover{border-color:var(--color-primary)}
.main-blog .blog-grid{display:grid;grid-template-columns:repeat(var(--grid-columns),1fr);gap:var(--grid-gap-blog);margin-bottom:4rem}
.main-blog .blog-card{grid-column:span 4;background:var(--color-bg-dark-200);border-radius:0.75rem;overflow:hidden;-webkit-transition:-webkit-transform 0.3s;transition:-webkit-transform 0.3s;transition:transform 0.3s;transition:transform 0.3s,-webkit-transform 0.3s;text-decoration:none;display:block;-webkit-transition:0.4s;transition:0.4s;position:relative}
.main-blog .blog-card:hover{-webkit-filter:var(--filter-shadow);filter:var(--filter-shadow)}
.main-blog .blog-card:hover .blog-card-image img{-webkit-filter:brightness(0.45);filter:brightness(0.45)}
.main-blog .blog-card:hover .blog-card-image .blog-card-btn{opacity:1}
.main-blog .blog-card-btn{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;z-index:1;-webkit-transition:0.4s;transition:0.4s}
.main-blog .blog-card-image{width:100%;height:300px;background:var(--color-border-100);position:relative;overflow:hidden}
.main-blog .blog-card-image img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center;-webkit-transition:0.4s;transition:0.4s}
.main-blog .blog-card-content{padding:0.75rem 1rem}
.main-blog .blog-date{font-size:var(--font-size-md);color:var(--color-text-200);margin-bottom:0.75rem;font-family:var(--font-family-secondary)}
.main-blog .blog-title{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-text-100);margin-bottom:0.75rem;line-height:1.4}
.main-blog .blog-tag{display:inline-block;background:transparent;border:1px solid var(--color-primary);color:var(--color-primary);padding:0.125rem 0.5rem;border-radius:2rem;font-size:var(--font-size-md);font-weight:700}
.main-blog .load-more{text-align:center}
.main-blog .btn-load-more{background:transparent;border:1px solid var(--color-primary);color:var(--color-primary);padding:0.875rem 2.5rem;border-radius:0.5rem;font-size:var(--font-size-base);font-weight:600;cursor:pointer;-webkit-transition:all 0.3s;transition:all 0.3s}
.main-blog .btn-load-more:hover{background:var(--color-primary);color:var(--color-bg-dark-100)}
.main-blog .blog-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.5rem;margin-top:3rem}
.main-blog .blog-pagination ul{display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.5rem;list-style:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.main-blog .blog-pagination a,
.main-blog .blog-pagination span{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-width:2.5rem;height:2.5rem;padding:0.5rem 0.75rem;background:var(--color-bg-dark-200);color:var(--color-text-200);border:1px solid var(--color-border-100);border-radius:6px;font-weight:700;font-size:var(--font-size-md);text-decoration:none;-webkit-transition:all 0.3s;transition:all 0.3s;cursor:pointer}
.main-blog .blog-pagination a:hover{background:var(--color-primary);color:var(--color-bg-dark-100);border-color:var(--color-primary)}
.main-blog .blog-pagination .active span{background:var(--color-primary);color:var(--color-bg-dark-100);border-color:var(--color-primary)}
.main-blog .blog-pagination .disabled span{opacity:0.5;cursor:not-allowed}
.main-blog .blog-pagination .disabled span:hover{background:var(--color-bg-dark-200);color:var(--color-text-200);border-color:var(--color-border-100)}
@media (max-width:1024px){.main-blog .blog-card{grid-column:span 6}}
@media (max-width:768px){.main-blog .blog-card{grid-column:span 12}.main-blog .hero h1{font-size:3rem}}
@media (max-width:480px){.main-blog .filter-btn{padding:0.375rem 1rem}}