/* Blog Card ---------------------------------- */
.post-single,
.blog-card {
    background: transparent;
    position: relative;
    border-radius: 0px;
    border: 0;
    background: $white-color;
    .post-title,
    .blog-title {
        font-weight: 500;
        color: $title-color;
        margin-bottom: 17px;
        a {
            &:hover {
                color: $theme-color;
            }
        }
    }
    .post-img,
    .blog-img {
        width: 100%;
        overflow: hidden;
        position: relative;
        z-index: 3;
        border-radius: 0;
        img {
            max-width: 100%;
            width: 100%;
            border-radius: 0;
            transform: scale(1.02);
            transition: 0.4s ease-in-out;
        }
    }
    .post-contents,
    .blog-content {
        border-radius: 0;
        padding: 40px;
        position: relative;
        z-index: 2;
        transition: 0.4s;
    }
    .post-meta-item,
    .blog-meta {
        a {
            font-size: 14px;
            font-weight: 400;
            font-family: $body-font;
            color: $title-color;
            margin-right: 0;
            text-transform: uppercase;         
        }
        i,svg {
            font-size: 14px;
            transition: 0.4s;
        }        
        a:hover {
            color: $theme-color;
            i,svg {
                color: $theme-color;
            }
        }
    }
    .blog-text {
        margin-bottom: 30px;
        p {
            margin-bottom: -0.3em;
            font-weight: 300;
            line-height: 26px;
        }
    }
    &:hover {
        .post-img,
        .blog-img {
            img {
                transform: scale(1.08);
            }
        }
    }
    &.style-border {
        border: 1px solid #E3E5DE;
    }
    /*Blog style 02*************/
    &.style2 {
        display: flex;
        align-items: center;
        height: 100%;
        .post-img,
        .blog-img {
            width: 391px;
            flex: none;
            height: 100%;
            img {
                height: 100%;
                object-fit: cover;
            }
        }
        .post-title,
        .blog-title {
            font-size: 24px;
        }
        @include ml {
            .post-img,
            .blog-img {
                width: 270px;
            }
        }
        @include lg {
            .post-img,
            .blog-img {
                width: 190px;
            }
        }
        @include md {
            .post-img,
            .blog-img {
                width: 290px;
            }
        }
        @include sm {
            .post-img,
            .blog-img {
                width: 170px;
            }
        }
        @include xs {
            display: block;
            height: auto;
            .post-img,
            .blog-img {
                width: auto;
            }
        }
    }
}  
@include ml {
    .post-single .post-contents,
    .blog-card .blog-content {
        padding: 30px;
    }
}
@include xl {
    .post-single .post-contents,
    .blog-card .blog-content {
        .post-title, .blog-title {
            font-size: 22px;
        }
    }
}
@include xs {
    .post-single .post-contents,
    .blog-card .blog-content {
        padding: 30px;
    }
}

/* Blog grid ---------------------------------- */
.blog-grid {
    &-wrap {
        display: grid;
        grid-template-areas:
            "one one one one one one two two two two two two"
            "one one one one one one three three three three three three";
    }
    display: flex;
    border: 1px solid $border-color;
    position: relative;
    border-radius: 0px;
    overflow: hidden;
    .blog-img {
        position: relative;
        min-width: 280px;
        height: 100%;
        overflow: hidden;
        margin: -1px;
        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: center center;
            transition: 0.4s ease-in-out;
        }
    }
    .blog-content {
        padding: 45px 40px;
        align-self: center;
    }
    .post-meta-item, .blog-meta {
        margin-bottom: 10px;
    }
    .blog-title {
        font-size: 24px;
        margin-bottom: 21px;
        margin-top: 0px;
        line-height: 32px;
        font-weight: 400;
    }
    .link-btn {
        font-size: 16px;
    }
    &:nth-child(1) {
        grid-area: one;
        display: block;
    }
    &:nth-child(2) {
        grid-area: two;
    }
    &:nth-child(3) {
        grid-area: three;
    }
    &.style-small {
        display: flex;
        &:not(:last-child) {
            margin-bottom: 24px;
        }
        .blog-img {
            min-width: 391px;
            height: 100%;
            img {
                height: 100%;
                object-fit: cover;
            }
        }
        .blog-content {
            padding: 50px;
        }
        .post-meta-item, .blog-meta {
            a {
                font-size: 14px;
            }
        }
    } 
    &:hover {
        .blog-img {
            img {
                transform: scale(1.1);
            }
        }
    }
}

@include ml {
    .blog-grid {
        .blog-content {
            padding: 44px 30px;
        }
        &.style-small .blog-img {
            min-width: 350px;
        }
        &.style-small .blog-content {
            padding: 40px;
        }
    } 
}
@include xl {
    .blog-grid .blog-img {
        min-width: 250px;
    }
}
@include lg {
    .blog-grid {
        .blog-content {
            padding: 35px 30px;
        }
        .blog-meta span, .blog-meta a {
            margin-right: 0;
        }
        &.style-small .blog-content {
            padding: 35px;
        }
        &.style-small .blog-img {
            min-width: 260px;
        }
    }
}


@include sm {
    .blog-grid {
        --space: 30px;
        flex-direction: column;
        .blog-img {
            height: 100%;
        }
        .blog-content {
            align-self: flex-start;
        }
        &.style-small {
            flex-direction: column;
            align-items: stretch;
            .blog-img {
                max-height: 265px;
                min-width: 100%;
            }
            .blog-content {
                padding: 35px 30px;
            }
        }
    }
}

/* Blog Card 3---------------------------------- */
.blog-card.style3 {
    border: 0;
    .blog-img {
        img {
            width: 100%;
        }
    }
    .blog-content {
        padding: 50px 0 0;
        text-align: center;
        .blog-title {
            max-width: 416px;
            margin: 0 auto 22px;
        }
    }
    .post-meta-item, .blog-meta {
        margin-bottom: 10px;
    }
}
@include lg {
    .blog-card.style3 .blog-content {
        padding: 30px 0 0;
    }
}
@include sm {
    .blog-card.style3 .blog-title {
        font-size: 24px;
    }
}
/* Blog Card 4---------------------------------- */
.blog-card.style4 {
    border: 0;
    overflow: hidden;
    .blog-img {
        img {
            width: 100%;
        }
    }
    .blog-content {
        padding: 30px 0 0;
        text-align: center;
        max-width: 278px;
        margin: auto;
    }
    .blog-title {
        font-size: 24px;
        margin-bottom: -0.3em;
    }
}
/* Blog Card 3---------------------------------- */
.blog-area-3 {
    .post-single .post-img img, .post-single .blog-img img, .blog-card .post-img img, .blog-card .blog-img img {
        width: 100%;
    }
}