/*
|--------------------------------------------------------------------------
| CONTEÚDO / ARTIGOS
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.content-hero {

    padding:
        55px 0 105px;

    background:
        linear-gradient(
            120deg,
            #090b09 0%,
            #141714 65%,
            #1b1f1b 100%
        );

    color:
        var(--white);

    border-bottom:
        1px solid var(--gold);

}


.breadcrumb {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-bottom:
        70px;

    color:
        #999d99;

    font-size:
        13px;

}


.breadcrumb a {

    color:
        var(--gold-light);

}


.content-hero-grid {

    display:
        grid;

    grid-template-columns:
        1.15fr .85fr;

    gap:
        90px;

    align-items:
        end;

}


.content-hero h1 {

    max-width:
        760px;

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(52px, 6vw, 78px);

    font-weight:
        600;

    line-height:
        1;

}


.content-hero h1 span {

    color:
        var(--gold-light);

}


.content-hero-text {

    border-left:
        1px solid
        rgba(183,154,99,.5);

    padding-left:
        35px;

}


.content-hero-text p {

    margin-bottom:
        18px;

    color:
        #c6c9c6;

}


/*
|--------------------------------------------------------------------------
| TÓPICOS
|--------------------------------------------------------------------------
*/

.content-topics-grid {

    display:
        grid;

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

    gap:
        22px;

    margin-top:
        50px;

}


.content-topic-card {

    display:
        flex;

    flex-direction:
        column;

    min-height:
        315px;

    padding:
        32px;

    border:
        1px solid var(--border);

    background:
        var(--white);

    transition:
        transform .25s,
        border-color .25s;

}


.content-topic-card:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--gold);

}


.content-topic-card > span {

    color:
        var(--gold);

    font-size:
        12px;

    font-weight:
        600;

}


.content-topic-card h3 {

    margin-top:
        28px;

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        31px;

    line-height:
        1.05;

}


.content-topic-card p {

    margin-top:
        17px;

    color:
        var(--muted);

    font-size:
        14px;

}


.content-topic-card strong {

    margin-top:
        auto;

    padding-top:
        28px;

    color:
        var(--gold);

    font-size:
        13px;

}


.content-topic-dark {

    background:
        var(--dark);

    color:
        var(--white);

    border-color:
        var(--dark);

}


.content-topic-dark p {

    color:
        #bfc3bf;

}


/*
|--------------------------------------------------------------------------
| EDITORIAL
|--------------------------------------------------------------------------
*/

.content-editorial {

    padding:
        105px 0;

    background:
        var(--dark);

    color:
        var(--white);

}


.content-editorial-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        100px;

}


.content-editorial h2 {

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(40px, 5vw, 58px);

    line-height:
        1.04;

}


.content-editorial-grid p {

    margin-bottom:
        20px;

    color:
        #c3c6c3;

}


/*
|--------------------------------------------------------------------------
| ÁREAS
|--------------------------------------------------------------------------
*/

.content-areas {

    padding:
        100px 0;

    background:
        var(--cream);

}


.content-areas h2 {

    max-width:
        700px;

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(40px, 5vw, 55px);

    line-height:
        1.04;

}


.content-areas-links {

    margin-top:
        50px;

    border-top:
        1px solid var(--border);

}


.content-areas-links a {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        24px 5px;

    border-bottom:
        1px solid var(--border);

    transition:
        padding .25s;

}


.content-areas-links a:hover {

    padding-left:
        15px;

}


.content-areas-links small {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--gold);

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        1.7px;

}


.content-areas-links span {

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        27px;

}


.content-areas-links strong {

    color:
        var(--gold);

    font-size:
        20px;

}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.content-cta {

    padding:
        80px 0;

}


.content-cta-inner {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        60px;

}


.content-cta h2 {

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(38px, 5vw, 52px);

    line-height:
        1;

}


.content-cta p {

    margin-top:
        16px;

    color:
        var(--muted);

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .content-hero-grid,
    .content-editorial-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .content-topics-grid {

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

    }


    .content-cta-inner {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


/*
|--------------------------------------------------------------------------
| CELULAR
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .content-hero {

        padding:
            35px 0 70px;

    }


    .breadcrumb {

        margin-bottom:
            45px;

    }


    .content-hero h1 {

        font-size:
            46px;

    }


    .content-hero-text {

        padding-left:
            20px;

    }


    .content-topics-grid {

        grid-template-columns:
            1fr;

    }


    .content-topic-card {

        min-height:
            275px;

    }


    .content-cta .btn {

        width:
            100%;

    }

}