/* =========================================================
CATEGORIE
========================================================= */

.categorie_page{
    max-width:1440px;
    margin:0 auto;
    padding:60px 30px 100px;
}

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

.categorie_header{
    max-width:1200px;
    margin:-40px auto 80px;
    padding:0 40px;
    text-align:center;
}

.categorie_title{
    margin:0;
    font-family:Georgia,serif;
    font-size:38px;
    font-weight:400;
    color:#111;
    letter-spacing:2px;
}

.categorie_description{
    max-width:760px;
    margin:35px auto 0;
    font-size:18px;
    line-height:1.8;
    font-weight:300;
    color:#444;
}

/* =========================================================
FEATURED
========================================================= */

.featured_article{
    margin-bottom:120px;
}

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

/* =========================================================
MEDIA
========================================================= */

.featured_media{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0;

    background:#000;

    overflow:hidden;

    min-height:420px;

    max-height:650px;

    border-radius:4px;

}

.featured_media img,
.featured_media video{

    display:block;

    width:auto;

    height:auto;

    max-width:100%;

    max-height:650px;

    object-fit:contain;

    transition:transform .7s ease;

}

.featured_content{

    max-width:920px;

    margin:45px auto 0;

    text-align:center;

}

.featured_category{

    display:block;

    margin-bottom:20px;

    font-size:12px;

    font-weight:600;

    letter-spacing:.35em;

    text-transform:uppercase;

    color:#777;

}

.featured_title{

    margin:0 0 25px;

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

    line-height:1.1;

    font-weight:700;

    letter-spacing:-1px;

    color:#111;

}

.featured_resume{

    margin:0;

    font-size:22px;

    line-height:1.8;

    font-weight:300;

    color:#555;

}
/* =========================================================
LATEST STORIES
========================================================= */

.stories_section{
    margin-bottom:100px;
}

.stories_heading{
    margin:0 0 70px;
    text-align:center;
    font-size:24px;
    font-weight:700;
    color:#111;
}

.stories_grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:90px 60px;
}

.story_card{
    display:flex;
}

.story_link{
    display:block;
    width:100%;
    text-decoration:none;
    color:inherit;
}

/* =========================================================
STORY MEDIA
========================================================= */

.story_media{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 0 25px;

    background:#000;

    overflow:hidden;

    min-height:280px;

    max-height:420px;

    border-radius:4px;

}

.story_media img,
.story_media video{

    display:block;

    width:auto;

    height:auto;

    max-width:100%;

    max-height:420px;

    object-fit:contain;

    transition:transform .7s ease;

}

/* =========================================================
TEXT
========================================================= */

.story_category{

    display:block;

    margin-bottom:15px;

    font-size:12px;

    font-weight:600;

    letter-spacing:.25em;

    text-transform:uppercase;

    color:#777;

}

.story_title{

    margin:0 0 18px;

    font-size:24px;

    line-height:1.25;

    font-weight:700;

    letter-spacing:-.5px;

    color:#111;

}

.story_resume{

    margin:0;

    font-size:17px;

    line-height:1.8;

    color:#666;

}

/* =========================================================
HOVER
========================================================= */

.featured_link:hover img,
.featured_link:hover video{

    transform:scale(1.02);

}

.story_link:hover img,
.story_link:hover video{

    transform:scale(1.04);

}
/* =========================================================
PAGINATION
========================================================= */

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

    margin-top:90px;

}

.pagination a{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    background:#fff;

    color:#111;

    border:1px solid #e8e8e8;

    transition:.25s;

}

.pagination a:hover{

    background:#111;

    border-color:#111;

    color:#fff;

}

.pagination a.active{

    background:#111;

    border-color:#111;

    color:#fff;

}

.pagination_arrow{

    font-size:18px;

}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width:1200px){

    .stories_grid{

        gap:70px 40px;

    }

}

@media (max-width:992px){

    .stories_grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .featured_title{

        font-size:48px;

    }

    .featured_resume{

        font-size:19px;

    }

}

@media (max-width:768px){

    .categorie_page{

        padding:35px 20px 80px;

    }

    .categorie_header{

        margin:0 auto 60px;

        padding:0;

    }

    .categorie_title{

        font-size:34px;

    }

    .categorie_description{

        font-size:17px;

    }

    .featured_article{

        margin-bottom:80px;

    }

    .featured_media{

        min-height:300px;

        max-height:450px;

    }

    .featured_media img,
    .featured_media video{

        max-height:450px;

    }

    .story_media{

        min-height:220px;

        max-height:320px;

    }

    .story_media img,
    .story_media video{

        max-height:320px;

    }

    .featured_title{

        font-size:36px;

    }

    .story_title{

        font-size:22px;

    }

}

@media (max-width:480px){

    .categorie_page{

        padding:25px 15px 60px;

    }

    .categorie_title{

        font-size:30px;

    }

    .categorie_description{

        font-size:16px;

    }

    .stories_heading{

        margin-bottom:40px;

        font-size:20px;

    }

    .featured_media{

        min-height:260px;

        max-height:360px;

    }

    .featured_media img,
    .featured_media video{

        max-height:360px;

    }

    .story_media{

        min-height:200px;

        max-height:280px;

    }

    .story_media img,
    .story_media video{

        max-height:280px;

    }

    .featured_title{

        font-size:30px;

    }

    .featured_resume{

        font-size:17px;

    }

    .story_title{

        font-size:20px;

    }

    .story_resume{

        font-size:16px;

    }

}

/* =========================================================
VIDEO
========================================================= */

video{

    display:block;

    background:#000;

}

/* =========================================================
MEDIA PROTECTION
========================================================= */

img,
video{

    -webkit-user-drag:none;

    user-select:none;

    -webkit-user-select:none;

}

.featured_media::after,
.story_media::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);

}