.blog-hero{text-align:center;padding:80px 0 40px}.blog-title{font-family:var(--font-heading);color:var(--color-heading);margin-bottom:12px;font-size:45px;font-weight:700}.blog-intro{font-family:var(--font-heading);color:var(--color-heading);max-width:680px;margin:0 auto;font-size:18px;line-height:1.6}.blog-filters{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.blog-filter{font-family:var(--font-heading);color:var(--color-heading);background:var(--color-lavender-bg);cursor:pointer;border-radius:50px;padding:8px 20px;font-size:15px;font-weight:600;text-decoration:none;transition:background .2s,color .2s;display:inline-block}.blog-filter:hover{background:#e0e3ef}.blog-filter--active,.blog-filter--active:hover{background:var(--color-heading);color:#fff}.blog-search{justify-content:center;margin:24px 0 40px;display:flex}.blog-search-input{font-family:var(--font-body);color:var(--color-body);background:var(--color-bg);border:1px solid #e8e8ee;border-radius:50px;outline:none;width:100%;max-width:380px;padding:10px 24px;font-size:16px;transition:border-color .2s}.blog-search-input:focus{border-color:var(--color-heading)}.blog-empty{font-family:var(--font-heading);color:var(--color-light);text-align:center;padding:64px 0;font-size:18px}.blog-pagination{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:48px;display:flex}.blog-page-btn{font-family:var(--font-heading);color:var(--color-heading);background:var(--color-lavender-bg);border-radius:50px;min-width:44px;padding:8px 16px;font-size:15px;font-weight:600;transition:background .2s,color .2s}.blog-page-btn:hover:not(:disabled){background:#e0e3ef}.blog-page-btn:disabled{opacity:.4;cursor:default}.blog-page-btn--current,.blog-page-btn--current:hover:not(:disabled){background:var(--color-heading);color:#fff}.blog-page-gap{font-family:var(--font-heading);color:var(--color-light);padding:0 4px}.blog-listing{padding:40px 0 80px}@media (max-width:1024px){.blog-title{font-size:36px}}@media (max-width:768px){.blog-hero{padding:56px 0 32px}.blog-title{font-size:30px}.blog-intro{font-size:16px}.blog-listing{padding:32px 0 56px}}@media (max-width:480px){.blog-title{font-size:26px}}