body{
    background:#000;
    color:white;
    font-family:Arial;
    margin:0;
}

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

#hero{
    height:420px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 80px;
    background:#000;
}

/* LEFT TEXT */

#heroOverlay{
    max-width:520px;
}

#heroTitle{
    font-size:44px;
    margin-bottom:12px;
}

#heroDescription{
    font-size:18px;
    line-height:1.5;
    opacity:0.9;
}

/* HERO POSTER */

#heroPoster{
    height:1080px;
    width:2200px;

    margin-left:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}

#heroImage{
    height:100%;
    width:auto;
    object-fit:cover;
    border-radius:12px;
}

/* ================================
   CATEGORY GRID
   ================================ */

#categories{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:20px;
    padding:40px;
}

.categoryTile{
    cursor:pointer;
}

.categoryTile img{
    width:100%;
    border-radius:6px;
}

.categoryTile p{
    margin-top:8px;
    font-size:14px;
}

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

#videoGrid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:20px;
    padding:40px;
}

.videoTile img{
    width:100%;
    border-radius:6px;
}

.videoTile p{
    margin-top:8px;
    font-size:14px;
}