@use '../../../utils' as *;
/*----------------------------------------*/
/*   3.4 blog Style
/*----------------------------------------*/

.cnt-blog{
    &-ptb{
        @media #{$lg,$md} {
            padding-top: 100px;
        }
        @media #{$xs} {
            padding-top: 80px;
        }
    }
    &-item{
        &-content{
            position: absolute;
            top: 60px;
            left: 60px;
            @media #{$xs} {
                left: 40px;
                top: 40px;
            }
        }
        &-sub{
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 15px;
            display: inline-block;
            letter-spacing: 0.15px;
            text-transform: uppercase;
            color: var(--tp-common-white);
            font-family: var(--tp-ff-clash-medium);
        }
        &-title{
            font-size: 60px;
            font-weight: 500;
            line-height: 1;
            margin-bottom: 30px;
            letter-spacing: 0.6px;
            color: var(--tp-common-white);
            font-family: var(--tp-ff-clash-medium);
            @media #{$xl} {
                font-size: 45px;
            }
            @media #{$xs} {
                font-size: 40px;
            }
        }
        &-thumb{
            position: relative;
            &::before{
                content: '';
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                border-radius: 16px;
                position: absolute;
                background-color: rgba($color: #050312, $alpha: 0.32);
            }
            & img{
                width: 100%;
                border-radius: 16px;
            }
        }
        &-btn{
            & .tp-btn-black-square.cnt-btn-style.btn-transparent{
                color: var(--tp-common-white);
                border-color: var(--tp-common-white);
            }
        }
        &-box{
            padding: 25px 30px;
            border-radius: 16px;
            background-color: var(--tp-common-white);
        }
        &-2{
            gap: 50px;
            display: flex;
            align-items: start;
            @media #{$xl} {
                gap: 15px;
            }
            @media #{$xs} {
                flex-wrap: wrap;
                gap: 20px;
            }
            &:hover{
                & .cnt-blog-item-2{
                    &-thumb{
                        & img{
                            transform: scale(1.1);
                        }
                    }
                }
            }
            &.bbr{
                padding-bottom: 30px;
                border-bottom: 1px solid rgba($color: #050312, $alpha: 0.1);
            }
            &-user{
                gap: 15px;
                flex: 0 0 auto;
                align-items: center;
                &-title{
                    font-size: 14px;
                    font-weight: 600;
                    margin-bottom: 2px;
                    letter-spacing: -0.28px;
                }
                &-content{
                    & p{
                        margin: 0;
                        font-size: 14px;
                    }
                }
            }
            &-thumb{
                overflow: hidden;
                border-radius: 8px;
                margin-bottom: 20px;
                & img{
                    width: 100%;
                    border-radius: 8px;
                    transition: all .5s ease-in-out;
                }
            }
            &-title{
                font-weight: 500;
                margin-bottom: 12px;
                font-family: var(--tp-ff-clash-medium);
                @media #{$xl,$xs} {
                    & br{
                        display: none;
                    }
                }
                & a{
                    &:hover{
                        color: var(--tp-common-red-2);
                    }
                }
            }
            &-content{
                width: 100%;
                & p{
                    margin: 0;
                    font-size: 12px;
                    font-weight: 500;
                    text-transform: uppercase;
                    color: rgba(5, 3, 18, 0.80);
                }
            }
        }
    }
}


.ais-blog{
    &-ptb{
        @media #{$lg} {
            padding-top: 100px;
            padding-bottom: 60px;
        }
        @media #{$md,$xs} {
            padding-top: 80px;
            padding-bottom: 40px;
        }
    }
    &-item{
        &-wrapper{
            & .creative-blog-title-sm{
                font-size: 24px;
                font-weight: 500;
                color: #050312;
            }
        }
    }
}