.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 {
flex-wrap: wrap;
text-decoration: none;
&:not(:last-child) {
margin-bottom: 16px;
@include breakpoint( '>960px' ) {
flex-wrap: nowrap;
width: 50%;
margin-bottom: 0;
padding-right: 16px;
&-img {
// Make image container height relative to width
padding-bottom: 52%;
overflow: hidden;
position: relative;
flex: none;
border-radius: 3px;
width: 144px;
height: 103px;
margin-right: 16px;
padding-bottom: 0;
img {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: auto;
&-text {
margin: 10px 0 0;
flex: 1;
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 {
color: var(--wp-admin-theme-color);
&-meta {
align-items: center;
font-size: 12px;
line-height: 17px;
color: $gray-700;
padding: 0;
height: 17px;
.woocommerce-gravatar {
margin: 1px 0 0 5px;
&.is-loading {
.is-placeholder {
@include placeholder();
p {
width: 40%;