/*===============================
    30.BLOG GRID css 
================================*/

.blog-grid-area{
	overflow: hidden;
	& .blog-grid-item{
		position: relative;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		overflow: hidden;
		display: block;
		height: 370px;
		& .img{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			@include transition(0.5s);
		}
		& .blog-grid-overlay{
			background-image: -moz-linear-gradient( to bottom, rgba(0,34,73,.1) 0%, rgba(0,34,73,0.01) 1%, rgba(0,34,73,.6) 60%);
			background-image: -webkit-linear-gradient( to bottom, rgba(0,34,73,.1) 0%, rgba(0,34,73,0.01) 1%, rgba(0,34,73,.6) 60%);
			background-image: linear-gradient( to bottom, rgba(0,34,73,.1) 0%, rgba(0,34,73,0.01) 1%, rgba(0,34,73,.6) 60%);
			height: 100%;
			width: 100%;
			top: 0;
			left: 0;
			position: absolute;
			padding: 30px;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			@media #{$lg} {
				padding: 20px;
			}
			@media #{$xs} {
				padding: 20px;
			}
			@media #{$sm} {
				padding: 40px;
			}
			&  span{
				background: $theme-color;
				color: $white;
				line-height: 26px;
				padding: 0 15px;
				font-size: 12px;
				font-weight: 700;
			}
			
			& .title{
				font-size: 22px;
				line-height: 32px;
				font-weight: 600;
				margin-bottom: 0px;
				color: $white;
				@media #{$lg} {
					font-size: 20px;
				}
				@media #{$md} {
				}
				@media #{$xs} {
					font-size: 18px;
				}
				@media #{$sm} {
					font-size: 18px;
				}
			}
			& ul{
				display: flex;
				justify-content: space-between;
				padding-top: 10px;
				& li{
					display: inline-block;
					color: $white;
					opacity: .7;
				}
			}
		}
		&:hover{
			.img{
                transform: scale(1.2) rotate(5deg);
            }
		}
	}
}