@use "../utilities" as *;

/**----------------------------------------
START: Blog CSS
----------------------------------------*/
.h4-blog-wrap {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-gap: 28px;
	.blog-item {
		&.style-3 {
			height: 260px;
			&:first-child {
				grid-row: span 2;
				grid-column: 1/3;
				height: 550px;
				@media #{$md, $sm, $xs} {
					height: 300px;
				}
			}
			.blog-thumb {
				height: 100%;
			}
			.blog-content {
				.title {
					max-width: 360px;
					@media #{$md, $sm,$xs} {
						max-width: 285px;
					}
				}
			}
			.blog-date {
				top: auto;
				inset-inline-start: auto;
				inset-inline-end: 30px;
				bottom: 30px;
				@media #{$lg, $md} {
					inset-inline-end: 20px;
					bottom: 20px;
				}
				@media #{$sm, $xs} {
					display: none;
				}
			}
			@media #{$md} {
				grid-column: 50%;
				height: 300px;
			}
			@media #{$sm, $xs} {
				grid-column: 1/3;
				height: 300px;
			}
		}
	}
	@media #{$lg, $md, $sm, $xs} {
		gap: 20px;
	}
	@media #{$md} {
		grid-template-columns: auto;
	}
	@media #{$sm, $xs} {
		grid-template-columns: 1fr;
	}
}

/* !END: Blog CSS */