OwlCyberSecurity - MANAGER

Edit File: _blog-list.scss

.ova-blog-list{
	.top-heading{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 30px;
		margin-bottom: 42px;
		.heading{
			margin: 0;
			font-size: 45px;
			line-height: 1.3;
			color: #232526;
			font-weight: 500;
			text-transform: uppercase;
			letter-spacing: 2.25px;
			@media (max-width: 1024px) {
				font-size: 35px;
			}
		}
		.read-more{
			transition: all .3s ease;
			font-size: 16px;
			font-weight: 600;
			line-height: 1.2;
			letter-spacing: 1.6px;
			text-transform: uppercase;
			padding: 24px 48px;
			color: #fff;
			background-color: #17181A;
			border-radius: 5px;
			border: 1px solid rgba(255,255,255,0.15);
			&:hover {
				background-color: var(--primary);
			}
		}
	}
	.item {
		@include transaction( all, 0.3s, linear);
		display: grid;
		align-items: center;
		grid-template-columns: 0.2fr 0.8fr;
		gap: 30px;
		padding: 20px 0;
		background: #171819;
		border-bottom: 1px solid #515658;
		
		&:not(:last-child) {
			margin-bottom: 30px;
		}
		&:hover {
			@include transaction( all, 0.3s, linear);
			border-bottom: 1px solid #fff;
			.media {
				img {
					transform: scale(1.1);
				}
			}
		}
		@media (max-width: 1200px) {
			grid-template-columns: 0.3fr 0.7fr;
		}
		@media (max-width: 767px) {
			grid-template-columns: auto;
		}
		.right-item {
			display: flex;
		    justify-content: space-between;
		    align-items: center;
		    gap: 20px;
		}
		.media {
			position: relative;
			overflow: hidden;
			border-radius: 7px;
			img {
				display: block;
				width: 100%;
				height: 140px;
				object-fit: cover;
				object-position: center;
				@include transaction( all, 0.3s, linear);
				@media (max-width: 767px) {
					height: 220px;
				}
			}
		}
		.post-title {
			margin: 0 0 5px 0;
			font-size: 35px;
			font-weight: 500;
			line-height: 1.3;	
			@media (max-width: 1200px) {
				font-size: 30px;
			}
			a {
				@include transaction( all, 0.3s, linear);
				color: #fff;
				&:hover {
					color: var(--primary);
				}
			}
		}
		.post-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 25px;
		}
		.post-meta {
			list-style-type: none;
			display: flex;
			flex-wrap: wrap;
			column-gap: 25px;
			row-gap: 5px;
			margin: 0;
			padding: 0;
			.item-meta {
				display: inline-block;
				font-size: 15px;
				color: #CDCDCD;
				.right{
					a {
						color: #CDCDCD;
						&:hover {
							color: var(--primary);
							text-decoration: underline;
						}
					}
				}
			}
		}
		.details-button {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			gap: 20px;
			color: #fff;
			@media (max-width: 767px) {
				font-size: 14px;
				gap: 8px;
			}
			&:hover {
				color: var(--primary);
			}
			span {
				line-height: 1.3;
			}
			i {
				display: inline-flex;
				line-height: 1;
				transform: rotate(-45deg);  
			}
		}
	}
}