.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;
		}
	}

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

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

		@include breakpoint( ">960px" ) {
			flex-wrap: nowrap;
			width: 50%;

			&: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: auto;
					width: 100%;
				}
			}
		}

		&-text {
			margin: 10px 0 0;
			flex: 1;

			@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: $gray-900;
			transition: color 0.2s ease;
		}

		&:hover {
			h3 {
				color: var(--wp-admin-theme-color);
			}
		}

		&-meta {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 12px;
			line-height: 17px;
			color: $gray-700;
			margin: 0;
			padding: 0;
			height: 17px;

			.woocommerce-gravatar {
				margin: 1px 0 0 5px;
			}
		}

		&.is-loading {
			.is-placeholder {
				@include placeholder();
			}

			p {
				width: 40%;
			}
		}

	}

}