✏️ Editing: _blog.scss Writable

.ova-blog{
	display: grid;
   	grid-template-columns: 1fr 1fr 1fr;
   	gap:30px;
   	padding: 0;
   	margin: 0;

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

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

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

&.ova-column_4{
   		grid-template-columns: 1fr 1fr 1fr 1fr;

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

.item{
		@include transaction( all, 0.3s, linear );
		list-style: none;

&:hover{
			@include transaction( all, 0.3s, linear );

.media{
				.box-img{
					a{
						img{
							@include transaction( all, 0.3s, linear );
							transform:scale(1.05);
						}
					}
				}
			}
		}

.media{
			position: relative;

.box-img{
				overflow: hidden;

a{
					img{
						@include transaction( all, 0.3s, linear );
						display: block;
						width: 100%;
						height: 306px;
						object-fit:cover;
					}
				}
			}

.post-author{
				display: inline-block;
				padding: 6px 22px 4px;
				background-color: #FFF;
				font-weight: 500;
				position: absolute;
				bottom: 0;
				left: 0;
				font-weight: 600;
				font-size: 12px;
				text-transform: uppercase;
				color: #1B1A1A;

a{
					@include transaction( all, 0.3s, ease );
					color: #1B1A1A;

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

.content{
			padding: 24px 6px;

.post-title{
				margin: 0 0 10px;
				a{
					@include transaction( all, 0.3s, ease);
					font-weight: 600;
					font-size: 20px;
					line-height: 1;
					text-transform: uppercase;
					color: var(--heading);
					letter-spacing: -0.06em;

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

.post-meta{
				padding: 0;

.item-meta{
					list-style: none;
					display: inline-block;
					vertical-align: middle;

&.post-date{
						margin: 0 20px 0 0;
						.date{
							font-size: 16px;
							line-height: 1;
							opacity: 0.6;
							color: var(--text);
						}
					}

&.post-comment{
						a{
							@include transaction( all, 0.3s, ease );
							font-size: 16px;
							line-height: 1;
							opacity: 0.6;
							color: var(--text);

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

🔐 Sid Gifari File Manager Pro