.text-with-video {
    padding: var(--spacing-6xl) 0;
    border-radius: var(--border-radius);

    @media screen and (max-width: 991px) {
        padding: var(--spacing-2xl) 0;
    }
    @media screen and (max-width: 576px) {
        padding: var(--spacing-xl) 0;
    }
    .text-col {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .text {
            *:last-of-type {
                margin-bottom: 0;
            }
        }
    }
    .video-col {
        .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-yellow);
                    pointer-events: none;
                    opacity: 0;
                    z-index: 3;
                    transition: opacity .5s 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;
            }
        }
    }
}