.video {
    .video-wrapper {
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
        border-bottom-left-radius: var(--border-radius);
        overflow: hidden;
        position: relative;

        @media screen and (max-width: 991px) {
            border-top-left-radius: 50px;
            border-top-right-radius: 50px;
            border-bottom-left-radius: 50px;
        }
        @media screen and (max-width: 576px) {
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
            border-bottom-left-radius: 30px;
        }
        &.border-gray {
            border: 1px solid #707070;
        }
        &.border-white {
            border: 1px solid var(--color-white);
        }
        &.border-orange {
            border: 1px solid var(--color-orange);
        }
        &.border-pink {
            border: 1px solid var(--color-pink);
        }
        &.border-yellow {
            border: 1px solid var(--color-yellow);
        }
        &.border-green {
            border: 1px solid var(--color-green);
        }
        &.border-blue {
            border: 1px solid var(--color-blue);
        }
        &.border-purple {
            border: 1px solid var(--color-purple);
        }
        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;

            &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: 4px solid var(--color-purple);
                pointer-events: none;
                opacity: 0;
                z-index: 3;
                transition: opacity .3s ease;
                border-top-left-radius: var(--border-radius);
                border-top-right-radius: var(--border-radius);
                border-bottom-left-radius: var(--border-radius);

                @media screen and (max-width: 991px) {
                    border-top-left-radius: 50px;
                    border-top-right-radius: 50px;
                    border-bottom-left-radius: 50px;
                }
                @media screen and (max-width: 576px) {
                    border-top-left-radius: 30px;
                    border-top-right-radius: 30px;
                    border-bottom-left-radius: 30px;
                }
            }
            &:hover, &:focus-visible {
                .play {
                    transform: translate(-50%, -50%) scale(1.2);
                }
            }
            &:focus-visible {
                &:after {
                    opacity: 1;
                }
            }
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: relative;
                z-index: 1;
            }
            .play {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 190px;
                height: 190px;
                background-image: url('../../../assets/images/play.png');
                background-size: cover;
                background-repeat: no-repeat;
                z-index: 2;
                transition: .5s ease;

                @media screen and (max-width: 1200px) {
                    width: 140px;
                    height: 140px;
                }
                @media screen and (max-width: 576px) {
                    width: 110px;
                    height: 110px;
                }
            }
        }
        .video-player {
            width: 100%;
            display: block;
        }
    }
}