.video-page {
    width: 100%;
}

.video-page > * {
    grid-column: 1/-1;
}

.video-page--video {
    width: 100vw;
    height: fit-content;
    margin: -.5rem -.5rem 1rem;
}

.video-page--video iframe {
    width: 100vw;
    height: 56vw;
}

.video-info > * {
    grid-column: 1/-1;
}

.video-info--title {
    margin-bottom: 1rem;
}

.video-info--description p.c-gray{
    margin-top: 1rem;
}

#video-back {
    position: fixed;
    right: .5rem;
    bottom: calc(.5rem + env(safe-area-inset-bottom));
    opacity: .5;
}

#video-back img {
    height: 1.5rem;
    width: 1.5rem;
}


/* TABLET */
@media only screen and (min-width: 768px) {
    .video-info > * {
        grid-column: span 3;
    }
}


/* DESKTOP */
@media only screen and (min-width: 1024px) {
    .video-page {
        padding-bottom: 6rem;
    }

    .video-page--video {
        grid-column: 2/-2;
        width: 100%;
        height: 90vh;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 0 1rem;
        padding: 2rem 0;
    }

    .video-page--video iframe {
        width: 100%;
        height: 100%;
    }

    .video-info > * {
        grid-column: span 6;
    }

    #video-back {
        position: fixed;
        top: 1rem;
        bottom: unset;
        right: 1rem;
        opacity: .5;
        transition: 250ms ease-in-out;
    }
}

/* 
HOVER
*/
@media (hover: hover) {
    #video-back:hover {
        opacity: 1;
    }
}