/* -- Video Popup ------------------------------------------- */

.vid-popup {

    /* -- Foreground image button ----------------------- */

    .fg-img-btn {
        display: block;
        cursor: pointer;

        picture {
            display: block;

            img {
                display: block;
                width: 100%;
                height: auto;
                transition: transform 0.4s ease;
            }
        }

        @media (hover: hover) and (pointer: fine) {
            &:hover img { transform: scale(1.04); }
        }

    }

    /* -- Play button ----------------------------------- */

    .ply-btn {
        background-color: var(--white);
        transition: background-color 0.3s ease;
        @media screen and (min-width:1280px) {
            & {
                padding: 1.1em;
                font-size: 2.2rem;
            }
        }
        
        .icn {
            color: var(--buttons);
        }

        @media (hover: hover) and (pointer: fine) {
            .fg-img-btn:hover & { background-color: var(--buttons); }
            .fg-img-btn:hover & .icn { color: var(--white); }
        }
    }


}