body{margin:0;font-family:"Helvetica Neue",sans-serif;background-color:#f9f9f9;color:#333}.blog-main{padding:2rem}.blog-header h1 span{color:#3784d1}.blog-header h1{font-size:2.5rem;margin-bottom:.5rem;text-align:center}.blog-header p{font-size:1.1rem;color:#666}.blog-header p span{color:#3784d1}.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(30%,1fr));gap:2rem}.blog-card{background:#fff;border:1px solid #e5e5e5;border-radius:8px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.03);transition:transform .2s ease}.blog-card:hover{transform:translateY(-5px)}.blog-card a{text-decoration:none;color:inherit}.blog-image{width:100%;height:180px;object-fit:cover}.blog-content{padding:1rem}.blog-title{font-size:1.25rem;margin:0 0 .5rem;font-weight:bold;color:#111}.blog-excerpt{font-size:.95rem;color:#555;line-height:1.4;margin-bottom:.75rem;text-align:justify}.blog-meta{font-size:.85rem;color:#888;display:flex;justify-content:space-between}.pagination{margin-top:3rem;display:flex;justify-content:center;gap:1rem}.pagination a{color:#007aff;text-decoration:none;padding:.5rem 1rem;border:1px solid #ddd;border-radius:4px;transition:background-color .2s}.pagination a:hover{background-color:#f0f0f0}@media(max-width:480px){body{font-family:"Helvetica Neue",sans-serif;background-color:#fff;margin:0;padding:0;min-height:100vh;overflow-x:hidden}.blog-header h1{font-size:large;color:#555;text-align:center;width:100%;font-family:sans-serif;font-weight:bolder}.blog-header p{font-size:small;color:#555;text-align:center;width:100%;font-family:sans-serif}.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100%,1fr));gap:2rem}}