.blog-layout{width:100%;display:flex;flex-direction:column;min-height:100vh}.blog-container{width:100%;max-width:1200px;margin:0 auto;padding:2rem}.blog-header{text-align:center;margin-bottom:3rem;animation:fade-in .8s ease}.blog-header h1{font-size:2.5rem;font-weight:700;margin-bottom:.5rem;background:linear-gradient(90deg,#7c3aed,#db2777);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}.blog-header p{font-size:1.125rem;color:#666}.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem;margin-top:2rem}.blog-card{border-radius:12px;overflow:hidden;background-color:#fff;border:1px solid rgba(0,0,0,.05);transition:all .3s ease;transform:translateY(0);box-shadow:0 4px 12px rgba(0,0,0,.05);height:100%;display:flex;flex-direction:column;cursor:pointer;position:relative;animation:fade-in .6s ease forwards}.blog-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.15)}.blog-card-image{width:100%;height:200px;overflow:hidden;position:relative;background-color:#f5f5f5}.blog-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.blog-card:hover .blog-card-image img{transform:scale(1.05)}.blog-card-content{padding:1.5rem;flex:1;display:flex;flex-direction:column}.blog-card h2{font-size:1.25rem;font-weight:600;margin-bottom:.75rem;line-height:1.3;color:#111;transition:color .3s ease}.blog-card:hover h2{color:#7c3aed}.blog-card p{font-size:.9375rem;line-height:1.6;color:#333;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}.back-button{display:inline-flex;align-items:center;gap:.5rem;font-weight:500;transition:all .2s ease;position:relative}.back-button:hover{transform:translateX(-2px)}.back-button:before{content:"←";display:inline-block;margin-right:.25rem}.blog-article{max-width:800px;margin:0 auto;padding:2rem 0}@media (max-width:768px){.blog-grid{grid-template-columns:1fr}.blog-header h1{font-size:2rem}.blog-container{padding:1rem}}@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}:root[class~=dark] .blog-card{background-color:#1a1a2e;border-color:rgba(255,255,255,.1)}:root[class~=dark] .blog-card h2{color:#f5f5f5}:root[class~=dark] .blog-card p{color:#e0e0e0}:root[class~=dark] .blog-header p{color:#aaa}:root[class~=dark] .blog-card-image{background-color:#2a2a3e}