/* ==========================================================
   ARTICLE
========================================================== */

.article{
    padding:48px 0 96px;
}

/* ==========================================================
   HEADER
========================================================== */

.article-header{
    text-align:center;
    margin-bottom:48px;
}

.category{
    color:var(--color-editorial);
    text-transform:uppercase;
    letter-spacing:.12em;
    font:700 .82rem/1 sans-serif;
    margin-bottom:1rem;
}

.article-header h1{
    font-size:clamp(2.5rem,5vw,3.5rem);
    line-height:1.05;
    margin:0 0 1.5rem;
}

.subtitle{
    max-width:36rem;
    margin:0 auto;
    font-size:1.2rem;
    color:var(--color-text-light);
    line-height:1.7;
}

.date{
    margin:2rem auto 0;
    color:var(--color-text-light);
    font-size:.9rem;
}

/* ==========================================================
   HERO
========================================================== */

.article-hero{
    width:100%;
    margin:0 0 5rem;
    aspect-ratio:2.35 / 1;
    overflow:hidden;
}

.article-hero img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ==========================================================
   BODY
========================================================== */

.article-body{
    width:100%;
}

.content{
    width:min(100%,var(--content));
    margin-inline:auto;
}

.content p{
    margin:1.6rem 0;
    font-size:1.12rem;
}

.content > p:first-child{
    font-size:1.4rem;
}

.lead{
    font-size:1.4rem;
}

.content h2{
    margin:5rem 0 1.5rem;
    font-size:2rem;
}

/* ==========================================================
   IMAGENS
========================================================== */

.image-breakout{
    width:min(100%,1100px);
    margin:4rem auto;
}

.image-breakout img{
    display:block;
    width:100%;
}

figcaption{
    margin-top:.8rem;
    color:var(--color-text-light);
    font-size:.9rem;
}

/* ==========================================================
   BLOCKQUOTE
========================================================== */

blockquote{
    max-width:40ch;
    margin:5rem auto;
    font-size:2rem;
    line-height:1.35;
    text-align:center;
    font-style:italic;
}

/* ==========================================================
   ARTICLE FOOTER
========================================================== */

.article-footer{
    margin-top:5rem;
}

.star-divider{
    margin:5rem auto;
}

/* ==========================================================
   RELATED
========================================================== */

.related h3{
    margin-bottom:2rem;
}

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:48px;
}

.card{
    display:block;
    text-decoration:none;
    color:inherit;
}

.thumb{
    width:100%;
    aspect-ratio:16/10;
    background:#ddd;
    margin-bottom:1.5rem;
}

.card .eyebrow{
    margin-bottom:.75rem;
    color:var(--color-editorial);
    text-transform:uppercase;
    letter-spacing:.12em;
    font:700 .82rem/1 sans-serif;
}

.card h4{
    line-height:1.3;
}

.related .story-card__image { margin-bottom: 1.5rem; }

/* ==========================================================
   RESPONSIVO
========================================================== */

@media (max-width:900px){

    .article{
        padding:40px 0 72px;
    }

    .article-header{
        margin-bottom:40px;
    }

    .article-hero{
        margin-bottom:4rem;
    }

    .content{
        padding-inline:24px;
    }

    blockquote{
        font-size:1.6rem;
    }

    .cards{
        grid-template-columns:1fr;
        gap:40px;
    }

}