.knowledge-hub.hub-posts {
	column-gap: 20px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	row-gap: 20px;
	width: 100%;

	@media screen and (max-width: 1023px) {
		grid-template-columns: repeat(3, 1fr);	
	}
	@media screen and (max-width: 882px) {
		grid-template-columns: repeat(2, 1fr);	
	}
	@media screen and (max-width: 662px) {
		grid-template-columns: 1fr;	
	}

	.hub-post {
		background-color: var(--wp--preset--color--white);
		display: grid;
		grid-template-rows: auto 1fr auto;
		height: 100%;
		min-height: 200px;
		padding: 20px;
		position: relative;
		row-gap: 20px;

		@media screen and (max-width: 767px) {
			min-height: auto;
		}

		&:hover {

			.title h4::before {
				opacity: 1;
				height: 2px;
			}
			&::before {
				height: 6px;
			}

		}

		&::before {
			content: '';
			background-color: var(--hub-colour);
			bottom: 0;
			height: 3px;
			left: 0;
			position: absolute;
			transition: .3s ease;
			width: 100%;
			z-index: 2;
		}
		
		.top {
			column-gap: 8px;
			display: grid;
			grid-template-columns: auto 1fr;
			opacity: 0.6;
		}
		.title {
			display: grid;
			justify-items: start;
			h4 {
				align-self: start;
				position: relative;
				width: fit-content;
				&::before {
					content: '';
					background-color: var(--wp--preset--color--navy);
					bottom: -1px;
					height: 0px;
					left: 0;
					opacity: 0;
					position: absolute;
					transition: 0.3s ease;
					width: 100%;
				}
			}
		}
		.link-text {
			display: grid;
		}

	}
}