#popup_video {
    position: fixed;
    bottom: 1.2rem;
    right: 1.2rem;
    z-index: 2;
    filter: drop-shadow(4px 4px 24px rgba(0, 0, 0, 0.20));
}

#popup_video button {
    padding: 0;
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
}

#popup_video .close-popup {
    position: absolute;
    right: -0.94rem;
    top: -0.94rem;
    z-index: 1;
}

#popup_video .play-button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

#popup_video .play-button path {
    transition: fill 0.2s ease-in-out;
    fill: transparent;
}

#popup_video a:hover + .play-button path {
    fill: #FFF;
}

#popup_video img {
    border-radius: 0.625rem;
}

#popup_video a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    pointer-events: none;
    border-radius: 0.625rem;
}

#popup_video a:hover::before {
    opacity: 0.3;
    visibility: visible;
}

@media (max-width: 767px) {
    #popup_video {
        bottom: 2rem;
        right: 0.875rem;
        filter: drop-shadow(4px 4px 15px rgba(0, 0, 0, 0.20));
    }

    #popup_video img {
        width: 6.25rem;
        height: 6.25rem;
    }

    #popup_video .play-button {
        width: 1.30206rem;
        height: 1.30206rem;
    }

    #popup_video .close-popup {
        right: -0.64rem;
        top: -0.64rem;
    }

    #popup_video .close-popup svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}