.ova-blog{
    position: relative;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap:30px;

    &.column_2{
        grid-template-columns: 1fr 1fr;
    }

    &.column_3{
        grid-template-columns: 1fr 1fr 1fr;
    }

    @media (max-width: 1024px) {
        &.column_2, &.column_3{
            grid-template-columns: 1fr 1fr;
        }    
    }

    @media (max-width: 600px) {
        &.column_2, &.column_3{
            grid-template-columns: 1fr;
        }    
    }

    .item{
        &:hover{
            .media{
                .box-img{
                    img{
                        @include transaction( all, .7s, ease);
                        transform: scale(1.1);
                    }
                }
            }
            .content{
                .post-meta{
                    .post-date{
                        &:before{
                            @include transaction( all, 0.5s, ease);
                            -webkit-transform: scaleY(1);
                            transform: scaleY(1);
                        }
                    }  
                }
                .post-title{
                    a{
                        @include transaction( all, 0.3s, ease);
                        color: var(--primary);
                    }
                }
            }
        }


        .media{
            position: relative;

            .box-img{
                position: relative;
                overflow: hidden;
                img{
                    @include transaction( all, 0.5s, ease);
                    display: block;
                    width: 100%;
                    object-fit: cover;
                }
            }
            
            .post-date{
                @include transaction( all, 0.5s, ease);
                position: absolute;
                top: 20px;
                right: 20px;
                width: 80px;
                text-transform: uppercase;
                text-align: center;
                background-color: #fff;
                color: var(--heading);
                line-height: 1;

                .date-j , .date-MY{
                    display: block;
                    position: relative;
                    z-index: 1;
                }

                .date-j{
                    font-size: 30px;
                    font-weight: 800;
                    color: #fff;
                    background-color: var(--primary);
                    padding: 16px;
                }

                .date-MY{
                    font-size: 11px;
                    font-weight: 600;
                    padding: 8px;
                }      
            }  

            .post-category{
                @include transaction( all, 0.3s, ease);
                position: absolute;
                bottom: 0;
                right: 30px;
                text-transform: uppercase;
                text-align: center;
                padding: 9px 20px;
                background-color: var(--primary);

                font-size: 14px;
                font-weight: bold;
                color: #fff;
                line-height: 1.2;     
            }
        }
      
        .content{
            position: relative;
            background-color: #fff;

            .post-meta{
                list-style-type: none;
                padding: 0;
                margin: 0 0 6px 0;
            }

            .item-meta{
                display: inline-flex;
                align-items: center;
                gap: 5px;
                line-height: 1;

                &:first-child{
                    margin-right: 10px;
                }

                .left{
                    color: var(--primary);
                    i{
                        font-size: 14px;
                    }
                }

                .right{
                    font-size: 14px;
                    font-weight: 600;
                    text-transform: capitalize;
                    a{
                        color: var(--text);
                        &:hover{
                            color: var(--primary);
                        }
                    }
                }
            }
          
            .post-title{
                a{
                    @include transaction( all, 0.3s, ease);
                    color: var(--heading);
                    &:hover{
                        color: var(--primary);
                        @include transaction( all, 0.3s, ease);
                    }   
                }
            }
        }
    }

    &.version_1 {
        .item{
            box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07);
            .media{
                .box-img{
                    img{
                        height: 320px;
                        @media (max-width: 1024px) {
                            height: 280px;
                        }
                    }
                }
            }
            .content{
                padding: 35px;

                @media (max-width: 600px) {
                    padding: 30px;
                }
                
                .item-meta{   
                    &.wp-author{
                        .author{
                            position: absolute;
                            top: -20px;
                            img{
                                width: 40px;
                                border-radius: 50%;
                                border: 2px solid var(--primary);
                            }
                        }
                    }
                    &.post-comment{
                        margin-right: 40px;
                        @media( max-width: 768px ){
                            margin-right: 15px;
                        }
                    }
                }

                .post-title{
                    margin: 0 0 24px 0;
                    font-size: 24px;
                    line-height: 1.3;
                }

                .short_desc{
                    p{
                        margin-bottom: 22px;
                    }
                }
  
                .read-more{
                    @include transaction( all, 0.5s, ease);

                    position: relative;
                    display: inline-flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    gap:4px;
                   
                    font-size: 14px;
                    line-height: 1.4;
                    font-weight: bold; 
                    text-transform: capitalize;
                    color: var(--text);
                    
                    padding: 15px 30px;
                    background-color:#f3f4f7;
                    
                    &:hover {
                        color: var(--primary);
                        i {
                            color: var(--primary);
                        }
                    }
                    i {
                        display: inline-flex;
                        font-size: 20px;
                        color: var(--heading);
                    }
                }
            }
        }
        // Version 1 - Template 2
        &.v1_template_2 {
            .media {
                .post-category {
                    right: unset;
                    left: 30px;
                }
            }
            .content {
                .item-meta{  
                    column-gap: 8px;   
                    &.wp-author{
                        .author{
                            position: static;
                        }
                        .right {
                            font-size: 16px;
                        }
                    }
                }
                .read-more {
                    margin: 15px 0 0 0;
                }
            }
        }
    }

    // Version 2
    &.version_2 {

        .item{
            display: flex; 
            align-items: center;
            gap: 30px;
            padding: 30px;
            background-color: #f3f4f7;

            @media (max-width: 767px){
                flex-direction: column;
            }  

            .media{
                .box-img{
                    border-radius: 50%;
                    img{
                        width: 132px;
                        height: 132px;
                        min-width: 132px;
                    }
                }

                .post-date{
                    display: none;
                }
            }

            .content{
                background-color: transparent; 
                .post-title{
                    margin: 0 0 16px 0;
                    font-size: 24px;
                    line-height: 1.3;
                }
                .read-more{
                    display: inline-flex;
                    align-items: center;
                    column-gap: 6px;

                    font-weight: 600;
                    color: var(--text);

                    .text-button {
                        text-decoration: underline;
                    }

                    &:hover {
                        color: var(--primary);
                        i {
                            color: var(--primary);
                        }
                    }
                    i {
                        display: inline-flex;
                    }
                }
            }

        }

        &.v2_template_2 {
            .item {
                padding: 0;
                align-items: normal;
                @media (max-width: 1024px){
                    flex-direction: column;
                    background-color: transparent;
                } 
                &:first-child {
                    grid-row: 1/span 2;
                    flex-direction: column;
                    background-color: transparent; 
                }
                &:not(:first-child) {
                    .content {
                        padding: 30px 25px 25px 0;
                        @media (max-width: 1024px){
                            padding: 0 25px 25px 0;
                        } 
                        .post-title {
                            font-size: 22px;
                        }
                    }
                }
                .content {
                    .short_desc {
                        p {
                            margin-bottom: 18px;
                        }
                    }
                }
                .media {
                    .box-img {
                        border-radius: 0;
                        height: 100%;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }
    }
}