@charset "UTF-8";

.video {
    position: relative;
    width: 100%;
    border-radius: 1.1em;
    overflow: hidden;
    box-shadow: 1em 1em 1em rgba(#000, 0.1);
    &__overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: none;
        z-index: 1;
    }
    &__frame {
        width: 101%;
        height: 101%;
        // backdrop-filter: blur(0.2em);
        // background-color: rgba($white, 0.7);
        background-color: $green-d;
    }
    &__icon-box {
        position: absolute;
        width: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;

        .video__icon {
            width: 7em;
            margin: 0 auto;
            img {
                width: 100%;
                height: auto;
            }
        }

        p {
            text-align: center;
            font-size: 1.2em;
            letter-spacing: 0.1em;
            color: $white;
            margin: 0;
            margin-top: 0.5em;
            // text-shadow: 0 0 0.5em rgba($white, 0.5);

            &.video__title {
                font-size: 2em;
            }
        }
    }
    &__player {
        width: 100%;
        padding-bottom: calc(9 / 16 * 100%);
        // border: 1px solid red;
    }
    &__yt {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        iframe {
            width: 100%;
            height: 100%;
        }
    }
    &.active {
        .video__frame {
            opacity: 0;
            visibility: hidden;
            transition: 0.3s;
        }
    }
}


@media screen and (max-width: 992px) {
    .video {
        &__icon-box {
            .video__icon {
                width: 10.5em;
                img {
                    width: 100%;
                    height: auto;
                }
            }
            p {
                font-size: 2em;
                margin-top: 0.7em;

                &.video__title {
                    font-size: 2.5em;
                }
            }
        }
    }
}