/* HERO */

.stories-hero{
    height:70vh;
    background:url('../images/stories-banner.jpg')
    center center/cover;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.stories-hero .overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);
}

.stories-hero .container{
    position:relative;
    z-index:2;
}

.stories-hero h1{
    font-size:5rem;
    font-family:'Cinzel',serif;
}

.stories-hero p{
    color:#ccc;
    font-size:18px;
}

/* FILTER */

.filter-section{
    padding:50px 0;
    background:#080808;
}

.filter-btn{
    border:1px solid #c8a06b;
    background:none;
    color:white;
    padding:10px 25px;
    margin:5px;
    border-radius:30px;
    transition:.4s;
}

.filter-btn:hover,
.filter-btn.active{
    background:#c8a06b;
    color:#000;
}

/* MOVIE CARD */

.movie-card{
    position:relative;
    height:500px;
    overflow:hidden;
    border-radius:20px;
    cursor:pointer;
}

.movie-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s;
}

.movie-card:hover img{
    transform:scale(1.15);
}

.movie-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
    transparent,
    rgba(0,0,0,.95));
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:30px;
}

.movie-overlay h3{
    color:white;
}

.movie-overlay p{
    color:#d8d8d8;
}

.watch-btn{
    display:inline-block;
    margin-top:10px;
    color:#c8a06b;
    text-decoration:none;
    font-weight:600;
}

/* FEATURED */

.featured-story{
    padding:120px 0;
    background:#080808;
}

.featured-tag{
    color:#c8a06b;
    letter-spacing:4px;
}

.featured-story h2{
    font-size:3.5rem;
    margin:20px 0;
    font-family:'Cinzel',serif;
}

.featured-story p{
    color:#bbb;
}

/* MOBILE */

@media(max-width:768px){

.stories-hero h1{
    font-size:2.5rem;
}

.movie-card{
    height:350px;
}

.featured-story h2{
    font-size:2rem;
}

}