:root{

--primary:#0B72E7;
--dark:#111827;
--gray:#6b7280;
--light:#f8fafc;

}

.article-hero{

height:750px;

position:relative;

overflow:hidden;

}

.article-hero img{

width:100%;
height:100%;
object-fit:cover;

}

.overlay{

position:absolute;

inset:0;

background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,.2));

display:flex;

align-items:end;

padding:60px;

color:white;

}

.container{

max-width:1200px;

margin:auto;

padding:0 20px;

}

.category{

display:inline-block;

padding:8px 15px;

background:var(--primary);

border-radius:30px;

margin-bottom:20px;

}

.article-layout{

display:grid;

grid-template-columns:3fr 1fr;

gap:50px;

margin:70px auto;

}

article{

font-size:18px;

line-height:2.2;

color:#444;

}

article h2{

margin:40px 0 20px;

color:var(--dark);

}

article img{

width:100%;

border-radius:12px;

margin:35px 0;

}

article blockquote{

border-right:5px solid var(--primary);

padding:20px;

background:#f6f8fb;

margin:30px 0;

font-size:20px;

}

aside{

position:sticky;

top:100px;

height:max-content;

}

.card{

background:white;

border-radius:15px;

padding:25px;

margin-bottom:25px;

box-shadow:0 10px 30px rgba(0,0,0,.06);

}

.share{

display:flex;

flex-direction:column;

gap:10px;

}

.share a{

text-decoration:none;

padding:12px;

background:#eef5ff;

border-radius:10px;

}

.related{

padding:70px 0;

background:#fafafa;

}

.cards{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

margin-top:40px;

}

.related-card{

background:white;

border-radius:15px;

overflow:hidden;

text-decoration:none;

color:#222;

transition:.3s;

box-shadow:0 8px 20px rgba(0,0,0,.06);

}

.related-card:hover{

transform:translateY(-8px);

}

.related-card img{

width:100%;

height:220px;

object-fit:cover;

}

.related-card h3{

padding:20px;

font-size:22px;

}

.related-card p{

padding:0 20px 20px;

color:#666;

}

@media(max-width:992px){

.article-layout{

grid-template-columns:1fr;

}

.cards{

grid-template-columns:1fr;

}

aside{

position:static;

}

.article-hero{

height:320px;

}

}