*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    overflow-x:hidden;
    background:#f5f5f5;
}

/* REELS */

.reels-container{

    margin-left:422px;

    width:calc(100vw - 520px);

    padding:30px;

    display:grid;

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

    gap:24px;
}

.reel{

    width:100%;

    aspect-ratio:9/16;

    position:relative;

    overflow:hidden;

    border-radius:12px;

    background:#000;
}

.reel iframe{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    border:none;
}

/* TABLET */

@media only screen and (max-width:1400px){

    .reels-container{

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

/* MOBILE */

@media only screen and (max-width:900px){

    .reels-container{

        margin-left:0;

        width:100vw;

        padding:20px;

        grid-template-columns:1fr;
    }
}