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

	&.columns2{
		grid-template-columns: 1fr 1fr;

		@media(max-width: 767px){
			grid-template-columns: 1fr;
		}
	}

	&.columns3{
		grid-template-columns: 1fr 1fr 1fr;

		@media(max-width: 1024px){
			grid-template-columns: 1fr 1fr;
		}
		@media(max-width: 767px){
			grid-template-columns: 1fr;
		}
	}

	&.columns4{
		grid-template-columns: 1fr 1fr 1fr 1fr;

		@media(max-width: 1400px){
			grid-template-columns: 1fr 1fr 1fr;
		}
		@media(max-width: 1024px){
			grid-template-columns: 1fr 1fr;
		}
		@media(max-width: 767px){
			grid-template-columns: 1fr;
		}
	}
	
	.media{
		img{
			width: 100%;
			object-fit: cover;
		}
	}

	.item{
		background: #FFFFFF;
		box-shadow: 0px 4px 40px rgba(43, 89, 255, 0.08);
		border-radius: 10px;

		&:hover{
			.media{
				a{
					img{
						@include transaction( all, 0.5s, ease);
						transform: scale(1.1);
					}
				}
			}
		}

		// Video, Media
		.media{
			border-radius: 10px 10px 0px 0px;
			position: relative;
			overflow: hidden;

			a{
				display: flex;
				img{
					@include transaction( all, 0.5s, ease);
					height: 282px;
					width: 100%;
					object-fit: cover;
					transform: scale(1.001);
				}
			}
		}

		.ova-content{
			padding: 30px 21px;

			// Meta
			.post-meta{
				list-style-type: none;
				padding: 0;
				margin: 0 0 23px 0;
				display: flex;
				justify-content: flex-start;
				gap:24px;

				.item-meta{
				    margin: 0;
				    line-height: 1;
				    display: flex;
				    justify-content: center;
				    align-items: center;
				    gap: 8px;

					.left{
						opacity: 0.6;
						color: var(--light);
					}
					.right{
					    font-size: 14px;
					    font-weight: 400;
					    line-height: 1.2;
						color: var(--light);
						a{
							@include transaction( all, 0.3s, ease);
							color: var(--light);
						}
					}

					&.wp-author{
						.post-author{
							&:hover{
								a{
									@include transaction( all, 0.3s, ease);
									color: var(--primary) ;
								}
							}
						}
					}

					i{
						font-size: 20px;
					}
				}
			}

			// Title
			.post-title{
				margin: 0 0 20px 0;

				a{
					@include transaction( all, 0.3s, ease);
					font-size: 24px;
    				font-weight: 700;
					color: var(--heading);
					text-transform: capitalize;
					&:hover{
						@include transaction( all, 0.3s, ease);
						color: var(--primary);
					}	
				}
			}

			// Short Description
			.short_desc{
				margin: 0 0 15px 0;
				padding: 0;
				p{
					margin: 0px;
				}
			}

			// Read More
			.read-more{
				@include transaction( all, 0.3s, ease);
				color: var(--primary);
				display: inline-flex;
			    justify-content: start;
			    align-items: center;
			    column-gap: 5px;
			    font-weight: 600;

				&:hover{
					@include transaction( all, 0.3s, ease);
					color: var(--heading);
				}	
			}
		}
	}

	&.template2{
		.item{
			border-radius: 0;
			background: none;
			box-shadow: none;
			.media{
				border-radius: 0;

				img{
					height: 320px;
				}
			}
		}

		.ova-content{
			position: relative;
			padding: 40px 40px 32px;
			margin: -80px 20px 0;
			z-index: 2;
			background-color: #fff;
			box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07);

			@media( max-width: 1250px ){
				margin: 0;
				padding: 40px 30px 32px;
			}
			@media( max-width: 767px ){
				padding: 40px 20px 32px;
			}

			.post-meta{
				margin: 0 0 20px 0;
				.item-meta{
					flex-wrap:wrap;
					.left{
						padding: 0 6px 0 0;
						opacity: 1;
						i{
							font-size: 24px;
							color: #999999;
						}
					}
				}
			}
			.post-title{
				line-height: 0;
				margin: 0 0 11px 0;
				a{
					font-size: 20px;
					line-height: 1.4;
				}
			}
			.short_desc{
				margin: 0 0 23px 0;
			}
		}
	}

	&.template3{
		.item{
			border-radius: 0;
			background: none;
			box-shadow: none;
			position: relative;

			&:hover{
				.ova-content{
					.post-title{
						a{
							text-decoration: underline;
						}
					}
				}
			}

			.media{
				border-radius: 0;

				img{
					height: 430px;
					@media( max-width: 767px ){
						height: 380px;
					}
				}

				.overlay{
					position: absolute;
					top: 0;
					bottom: 0;
					width: 100%;
					background: linear-gradient(180deg, rgba(17, 27, 25, 0) 33.95%, rgba(0, 0, 0, 0.9) 100%);
				}
			}

			.ova-content{
				position: absolute;
				bottom: 0;
				padding: 40px 30px 27px;
				z-index: 2;

				.post-meta{
					margin: 0 0 10px 0;
					.item-meta{
						flex-wrap:wrap;

						.left{
							opacity: 1;
							padding: 0 6px 0 0;
							i{
								font-size: 24px;
								color: #fff;
							}
						}
						.right{
							color: #fff;

							a{
								color: #fff;
							}
						}
					}
				}
				.post-title{
					line-height: 0;
					margin: 0 0 10px 0;
					a{
						font-size: 22px;
						line-height: 1.4;
						color: #fff;

						&:hover{
							color: var(--primary);
						}
					}

				}
				.short_desc{
					margin: 0 0 23px 0;
					color: #fff;
				}
				.read-more{
					color: #FFC83E;

					&:hover{
						color: var(--secondary);
					}
				}
			}
		}
	}

	&.template4{
		grid-template-columns: 1fr 1fr;
		@media( max-width: 1300px ){
			grid-template-columns: 1fr;
		}

		.item{
			border-radius: 0;
			background: none;
			box-shadow: none;
			display: flex;
			@media( max-width: 767px ){
				flex-direction:column;
				height: fit-content;
				box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07);	
			}

			&.no-thumbnail {
				.ova-content {
					flex-basis: 100%;
				}
			}
			
			.media{
				flex-basis: 50%;
				border-radius: 0;
				height: 100%;
			}

			.ova-content{
				display: flex;
    			flex-direction: column;
    			justify-content: center;
				flex-basis: 50%;
				padding: 30px;
				background-color: #fff;
				@media( max-width: 767px ){
					flex-basis: auto;	
				}

				.post-meta{
					flex-wrap: wrap;
					margin: 0 0 10px 0;
					.item-meta{
						flex-wrap:wrap;
						.left{
							opacity: 1;
							padding: 0 6px 0 0;
							i{
								font-size: 24px;
								color: var(--heading);
							}
						}
						.right{
							color: var(--heading);

							a{
								color: var(--heading);
							}
						}
					}
				}
				.post-title{
					line-height: 0;
					margin: 0 0 16px 0;
					a{
						font-size: 22px;
						line-height: 1.3;
					}
				}
				.short_desc{
					margin: 0 0 21px 0;
				}
				.read-more{
					color: var(--heading);
					width: fit-content;

					&:hover{
						color: var(--secondary);
					}
				}
			}
		}
	}
}