// grid all css

@import '../../common';

.prelements-blog-grid{
	.pre-blog-item {
		.blog-inner-wrap {
			position: relative;
		}
		&.pre-blog-item-list {
			.blog-inner-wrap {
				margin-left: 0;
				margin-right: 0;
				.rs-list-image{
					padding-left: 0;
				}
			}
		}
	}
    .pre-blog-item {
        .blog-inner-wrap{
            background: #F7F7F7;
            margin-bottom: 25px;
            margin-left: 0;
		    margin-right: 0;
            transition: all .3s ease;
        }         
        .pre-image-wrap{
            position: relative;            
            .rs-cate{
                background: $primaryColor;
                color: $whiteColor;
                font-size: 15px;
                line-height: 28px;
                padding: 1px 16px;
                position: absolute;
                left: 30px;
                bottom: -14px;
                display: inline-block;
                border-radius: 2px;
            }
            .rs--thum{
                overflow: hidden;
                display: block;
                img{
                    transition: all .3s ease;
                }
            }

            img {
                width: 100%;
            }
        }  
        .pre-blog-content{
            padding: 38px 30px 25px 30px;
            .pre-content{
                margin: 0;
                padding: 4px 0 20px;
            }
            h3{
                font-size: 24px;
                line-height: 34px;
                font-weight: 700;
                margin-bottom: 30px;
                a{
                    color: $titleColor;
                    transition: all .5s ease;
                    text-decoration: none;
                    display: inline;
                    background-image: linear-gradient(to bottom, $titleColor 0%, $titleColor 100%);
                    background-size: 0 2px;
                    background-repeat: no-repeat;
                    background-position: left 100%;
                    transition: all 0.7s;
                    &:hover{
                        background-size: 100% 2px;
                    }
                }
            }
            .pre-blog-meta{
                margin: 0;
                padding: 0 0 14px;
                list-style: none;
                display: flex;
                font-size: 16px;
                position: relative;
                &::before{
                    position: absolute;
                    content: '';
                    left: 0;
                    top: 13px;
                    height: 1px;
                    width: 0px;
                    background: $secondaryColor;
                }
                li{
                    position: relative;
                    &:last-child{
                        padding-left: 20px;
                        margin-left: 15px;
                        &::before{
                            content: "";
                            position: absolute;
                            width: 8px;
                            height: 8px;
                            border-radius: 0%;
                            left: 0;
                            top: 10px;
                            background: $primaryColor;
                        }
                    }
                    span{
                        text-transform: capitalize;
                        font-weight: 700;
                    }
                }
            }
            .blog-btn-part {
				a {
					display: inline-flex;
					align-items: center;
					gap: 5px;
					transition: $transition;
					color: $titleColor;
					padding: 10px 30px;
					font-weight: 600;
					border-radius: 10px;
					background: $primaryColor;
					i {
						font-size: 18px;
						transition: inherit;
						font-weight: 400;
						color: $titleColor;
					}
					svg {
						width: 18px;
						height: 18px;
						path {
							transition: $transition;
							fill: $titleColor;
						}
					}
					&:hover {
						background: $titleColor;
						color: $primaryColor;
						i {
							color: $primaryColor;
						}
						svg {
							path {
								fill: $primaryColor;
							}
						}
					}
				}
            }
        }   
        &:hover{
            .pre-image-wrap{
                .rs--thum{
                    img{
                        transform: scale(1.1);
                    }
                }
            }  
        }
    }
    .blog_style_style2{
        .pre-blog-item .pre-blog-content{
            padding: 15px 24px 15px 14px;
        }
        .pre-blog-item .pre-blog-content .pre-blog-meta{
            padding: 0 0 8px;
        }
        .pre-blog-item .pre-blog-content .blog-btn-part {
            margin: 50px 0 0;
            padding: 14px 0 0;
        }
        .pre-blog-item .pre-image-wrap .rs-cate {
            left: 25px;
            top: 25px;
            bottom: auto;
        }
        .pre-blog-item .pre-blog-content .pre-content {
            margin: 0;
            padding: 15px 0 0;
        }
    }
    .blog_style_style3{
        .pre-blog-item .pre-blog-content{
            padding: 15px 15px 15px 22px;
            .rs-cate{
                background: $primaryColor;
                color: $whiteColor;
                font-size: 15px;
                line-height: 28px;
                padding: 1px 16px;
                display: inline-block;
                border-radius: 2px;
                margin-top: 20px;
            }
        }
        .pre-blog-item .pre-blog-content .pre-blog-meta{
            padding: 0 0 8px;
        }
        .pre-blog-item .pre-blog-content .blog-btn-part {
            margin: 50px 0 0;
            padding: 14px 0 0;
        }
        .pre-blog-item .pre-image-wrap .rs-cate {
            left: 25px;
            top: 25px;
            bottom: auto;
        }
        .pre-blog-item .pre-blog-content .pre-content {
            margin: 0;
            padding: 15px 0 6px;
        }
        .pre-blog-item.pre-blog-item-list3 .blog-inner-wrap .rs-list-image {
            padding-right: 0;
            order: 2;
        }
        .pre-blog-item .blog-inner-wrap{
            clip-path: polygon(0% 0%, 94% 0, 100% 15%, 100% 100%, 0% 100%) !important;
        }
    }
    .blog_style_style4{
        .blog-inner-wraps{
            .pre-image-wrap{
                position: relative;
                clip-path: polygon(0% 0%, 92% 0, 100% 11%, 100% 100%, 0% 100%) !important;
                .pre-blog-content{
                    padding: 0;
                    position: absolute;
                    left: 45px;
                    bottom: 44px;
                    right: 50px;
                    z-index: 1;
                } 
                &::before{
                    opacity: .9;
                    background: transparent;
                    background: linear-gradient(transparent, #000000), linear-gradient(transparent, #000000);
                    background: -moz-linear-gradient(transparent, #000000), -moz-linear-gradient(transparent, #000000);
                    background: -o-linear-gradient(transparent, #000000), -o-linear-gradient(transparent, #000000);
                    content: "";
                    height: 100%;
                    bottom: -2px;
                    left: 0;
                    right: 0;
                    position: absolute;
                    width: 100%;
                    z-index: 1;
                    transition: all 0.7s ease 0s;
                } 
                img{
                    width: 100%;
                }              
            }
            .pre-blog-content .pre-content,
            .pre-blog-content h3 a,
            .pre-blog-content .pre-blog-meta{
                color: $whiteColor;
            }
            .pre-blog-content .pre-blog-meta{
                padding: 0 0 5px;
            }            
            .pre-blog-content .pre-blog-meta li:last-child::before{
                background: $whiteColor;
            }
            .pre-image-wrap .rs-cate{
                position: unset;
            }
        }
    }
}