OwlCyberSecurity - MANAGER

Edit File: _blog-grid.scss

.ova-blog{
	display: grid;
	gap: 30px;
	&.column_2{
		grid-template-columns: 1fr 1fr;
		@media screen and (max-width: 767px) {
			grid-template-columns: 1fr;
		}
	}
	&.column_3{
		grid-template-columns: 1fr 1fr 1fr;
		@media screen and (max-width: 1023px) {
			grid-template-columns: 1fr 1fr;
		}
		@media screen and (max-width: 767px) {
			grid-template-columns: 1fr;
		}
	}
	&.column_4{
		grid-template-columns: 1fr 1fr 1fr 1fr;
		@media screen and (max-width: 1200px) {
			grid-template-columns: 1fr 1fr 1fr;
		}
		@media screen and (max-width: 1023px) {
			grid-template-columns: 1fr 1fr;
		}
		@media screen and (max-width: 767px) {
			grid-template-columns: 1fr;
		}
	}
	.item {
		padding: 24px;
		background: #fff;
		border-radius: 20px;
		border: 1px solid #E7EAEE;
		@include transaction( all, 0.3s, linear);
		&:hover {
			.media {
				img {
					transform: scale(1.1);
				}
			}
		}
		.media {
			position: relative;
			overflow: hidden;
			border-radius: 8px;
			margin-bottom: 20px;
			img {
				display: block;
				width: 100%;
				height: 240px;
				object-fit: cover;
				object-position: center;
				@include transaction( all, 0.3s, linear);
			}
		}
		.post-title {
			margin: 0;
			font-size: 22px;
			font-weight: 500;
			line-height: 1.3;	
			a {
				@include transaction( all, 0.3s, linear);
				color: var(--heading);
				&:hover {
					color: var(--primary);
				}
			}
		}
		.short_desc {
			margin: 16px 0;
			font-size: 16px;
			line-height: 1.6;
			color: #939393;
		}
		.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;
				.right{
					a {
						color: var(--text);
						&:hover {
							color: var(--primary);
							text-decoration: underline;
						}
					}
				}
			}
		}
		.category {
			font-size: 15px;
			font-weight: 500;
			color: #1237A5;
			@include transaction( all, 0.3s, ease);
			&:hover{
				@include transaction( all, 0.3s, ease);
			}
		}
	}
}

.wrap-load-more {
	position: relative;
	width: 100%;

.loader {
		position: absolute;
		bottom: -90px;
		left: 50%;
		transform: translate(-50%);
		stroke-linecap: round;
		z-index: 1;
		circle {
			fill: none;
			stroke-width: 1.5;
			animation-duration: 1.5s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			transform-origin: 25px 25px;
			will-change: transform;
			stroke: var(--primary);

&:nth-of-type(1) {
				stroke-dasharray: 40px;
				animation-name: preloader_1;
			}

&:nth-of-type(2) {
				stroke-dasharray: 80px;
				animation-name: preloader_2;
			}
		}

@keyframes preloader_1 {
			100% {
				transform: rotate(360deg);
			}
		}
		@keyframes preloader_2 {
			100% {
				transform: rotate(-360deg);
			}
		}
	}
}

.ova_pagination_ajax{
	ul{
	    display: flex;
	    justify-content: flex-end;
	    flex-wrap: wrap;
	    list-style: none;
	    margin: 55px 0 0 0;
	    padding: 0;

li{
			margin: 0;
			&:not(:last-child) {
				margin-right: 5px !important;
			}

.page-numbers{
				width: 57px;
				min-width: 57px;
			    height: 32px;
			    font-size: 14px;
			    line-height: 1;
			    color: var(--heading);
			    background-color: #f4f4f4;
			    display: inline-flex;
			    justify-content: center;
			    align-items: center;
			    padding: 0;
			    margin: 0;
			    border-radius: 99px;
			    font-weight: 500;
			    cursor: pointer;
			    text-decoration: none;
			    -moz-transition: all .3s ease;
			    -webkit-transition: all .3s ease;
			    transition: all .3s ease;

i{
			    	display: inline-flex;
                    font-size: 0.6em;
                    line-height: 1;
                }
					
				&:focus{
					outline: none;
				}

&.next{
					margin: 0;
					text-decoration: none;
					padding: 9px 15px;
				}

&.prev{
					margin: 0;
					text-decoration: none;
					padding: 9px 15px;
				}

&:hover, &.current {
					color: #fff;
					background-color: var(--primary);
				}
			}
		}
	}
}