.woocommerce-marketing-knowledgebase-card {

	.woocommerce-marketing-slider {
		margin: 0 0 14px;
	}

	.woocommerce-pagination {
		justify-content: flex-start;
		flex-direction: row; // Required for mobile
	}

	&__page {
		width: 100%;
		display: flex;

		@include breakpoint( '<960px' ) {
			display: block;
		}
	}

	.components-spinner {
		float: none;
		margin: 45px auto 50px;
		display: block;
	}

	&__post {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		text-decoration: none;

		&:not(:last-child) {
			margin-bottom: 16px;
		}

		@include breakpoint( '>960px' ) {
			flex-wrap: nowrap;

			&:not(:last-child) {
				margin-bottom: 0;
				padding-right: 16px;
			}
		}

		&-img {
			width: 100%;
			// Make image container height relative to width
			padding-bottom: 52%;
			overflow: hidden;
			position: relative;
			flex: none;
			border-radius: 3px;

			@include breakpoint( '>960px' ) {
				width: 144px;
				height: 103px;
				margin-right: 16px;
				padding-bottom: 0;
			}

			img {
				position: absolute;
				top: 0;
				right: 0;
				display: block;
				width: 100%;

				@include breakpoint( '>960px' ) {
					position: absolute;
					top: 0;
					right: 0;
					height: 100%;
					width: auto;
				}
			}
		}

		&-text {
			margin: 10px 0 0;

			@include breakpoint('>960px') {
				margin: 0;
			}
		}

		h3 {
			margin-top: 0;
			margin-bottom: 6px;
			font-size: 16px;
			line-height: 24px;
			font-weight: 600;
			white-space: normal;
			color: $core-grey-dark-800;
		}

		&:hover {
			h3 {
				color: $core-blue-dark-900;
			}
		}

		&-meta {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 12px;
			line-height: 16px;
			color: $core-grey-dark-500;
			margin: 0;

			.woocommerce-gravatar {
				margin-left: 5px;
			}
		}
	}
}