/* HERO */

.participants-hero{
    padding:5em 6em;
    text-align:center;
    background-color:#12609d;
    color:white;
    display:flex;
    flex-direction:column;
    gap:1.8em;
}

.participants-hero p{
    max-width:50ch;
    margin:auto;
    text-wrap:balance;
}


/* SECTION BACKGROUND */

.participants-section{
    background:#f4f8fc;
}


/* GRID */

.participants-grid{
    padding:5em 6em;

    display:grid;
    grid-template-columns:repeat(5, minmax(100px,1fr));
    gap:2em;
}


/* VIDEO CARD */

.video-card{
    width:100%;
}


/* VIDEO WRAPPER */

.video-wrapper{
    position:relative;
    width:100%;
    aspect-ratio:9/16;
    overflow:hidden;
    border-radius:10px;
    background:black;
    cursor:pointer;
}


/* THUMBNAIL */

.thumbnail{
    width:100%;
    height:100%;
    object-fit:cover;
}


/* OVERLAY */

.overlay{
    position:absolute;
    inset:0;

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

    background:rgba(0,0,0,0.45);

    color:white;
    font-weight:700;
    font-size:1.4em;

    text-transform:uppercase;
    letter-spacing:0.08em;
}


/* IFRAME */

.video-wrapper iframe{
    width:100%;
    height:100%;
    border:0;
}


/* TABLET + MOBILE */

@media (max-width:900px){

    .participants-hero{
        padding:4em 2em;
    }

    .participants-grid{
        padding:4em 2em;
        grid-template-columns:repeat(2,1fr);
    }

    .overlay{
    font-size:1em;
    }

}