@use '../utils' as *;

/*=============================
    07. Video Post
===============================*/
.video-post-area .row {
    --bs-gutter-x: 40px;
    @media #{$md} {
        --bs-gutter-x: 30px;
    }
}
.video {
    &__post {
        &-item {
            &.big-post {
                margin: 0 0 0;
                @media #{$md} {
                    margin: 0 0 50px;
                }
                & .video__post-thumb {
                    margin: 0 0 35px;
                    @media #{$xs} {
                        margin: 0 0 28px;
                    }
                }
                & img {
                    width: 100%;
                    height: 498px;
                    object-fit: cover;
                    object-position: center;
                    @media #{$lg} {
                        height: 410px;
                    }
                    @media #{$xs} {
                        height: 200px;
                    }
                    @media #{$sm} {
                        height: 280px;
                    }
                }
                & .popup-video {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    @include transform(translate(-50%, -50%));
                    width: 80px;
                    height: 80px;
                    @include flexbox();
                    align-items: center;
                    justify-content: center;
                    color: var(--tg-heading-color);
                    background: var(--tg-common-color-white);
                    font-size: 18px;
                    @include border-radius(50%);
                    z-index: 1;
                    &:hover {
                        background: var(--tg-theme-primary);
                        color: var(--tg-common-color-white);
                    }
                }
                & .video__post-content .title {
                    font-size: 30px;
                    @media #{$lg} {
                        font-size: 26px;
                    }
                    @media #{$md} {
                        font-size: 30px;
                    }
                    @media #{$xs} {
                        font-size: 20px;
                        line-height: 1.4;
                    }
                    @media #{$sm} {
                        font-size: 24px;
                    }
                }
            }
            &.side-post {
                margin: 0 0 24px;
                padding: 0 0 32px;
                @include flexbox();
                position: relative;
                align-items: center;
                @media #{$lg} {
                    margin: 0 0 19px;
                    padding: 0 0 25px;
                }
                @media #{$md} {
                    margin: 0 0 24px;
                    padding: 0 0 32px;
                }
                @media #{$xs} {
                    display: block;
                }
                &::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: 8px;
                    background-image: url(../img/bg/line2.png);
                    background-repeat: repeat;
                }
                & .video__post-thumb {
                    width: 130px;
                    flex: 0 0 auto;
                    margin: 0 22px 0 0;
                    @media #{$lg} {
                        width: 120px;
                    }
                    @media #{$xs} {
                        width: 100%;
                        margin: 0 0 20px;
                    }
                    & .popup-video {
                        position: relative;
                        z-index: 1;
                        &::before {
                            content: "";
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            background: var(--tg-theme-secondary);
                            @include transition(.4s);
                            opacity: .35;
                            z-index: 1;
                        }
                        &:hover {
                            &::before {
                                opacity: 0;
                            }
                        }
                    }
                    & .popup-video i {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        @include transform(translate(-50%, -50%));
                        width: 46px;
                        height: 46px;
                        background: rgba(255, 255, 255, .3);
                        @include border-radius(50%);
                        @include flexbox();
                        align-items: center;
                        justify-content: center;
                        font-size: 14px;
                        color: var(--tg-common-color-white);
                        @include transition(.4s);
                        z-index: 2;
                    }
                    &:hover {
                        & .popup-video i {
                            background: var(--tg-common-color-white);
                            color: var(--tg-heading-color);
                        }
                    }
                }
                & img {
                    width: 100%;
                    height: 100px;
                    object-fit: cover;
                    object-position: center;
                    @media #{$xs} {
                        height: 200px;
                    }
                    @media #{$sm} {
                        height: 280px;
                    }
                }
                & .tgbanner__content-meta {
                    margin: 0 0 7px;
                }
                & .video__post-content .title {
                    font-size: 20px;
                    line-height: 1.4;
                    @media #{$xl} {
                        font-size: 19px;
                    }
                    @media #{$lg} {
                        font-size: 18px;
                    }
                    @media #{$md} {
                        font-size: 20px;
                    }
                }
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
        &-thumb {
            position: relative;
            & img {
                @include transition(.4s);
            }
        }
        &-content {
            & .title {
                margin: 0 0;
            }
        }
    }
}
.stories-video-post {
    & .stories-post__thumb {
        position: relative;
        & .popup-video {
            position: absolute;
            left: 50%;
            top: 50%;
            @include transform(translate(-50%, -50%));
            width: 80px;
            height: 80px;
            @include flexbox();
            align-items: center;
            justify-content: center;
            color: var(--tg-heading-color);
            background: var(--tg-common-color-white);
            font-size: 18px;
            @include border-radius(50%);
            z-index: 1;
            &:hover {
                background: var(--tg-theme-primary);
                color: var(--tg-common-color-white);
            }
        }
        &:hover {
            & img {
                @include transform(scale(1.05));
            }
        }
    }
}
.nft-video-post {
    & .video__post-item.side-post::after {
        background-image: url(../img/bg/line3.png);
    }
}