.woocommerce-marketing-recommended-extensions-card {
.components-card__body {
padding: $gap-small;
}
.components-spinner {
float: none;
margin: 45px auto 50px;
display: block;
&__items {
display: flex;
flex-wrap: wrap;
@include breakpoint( '>600px' ) {
> a {
width: 50%;
@include breakpoint( '>960px' ) {
width: 33.3%;
&--count-1 > a {
width: 100%;
&--count-2 > a {
&--count-4 > a {
width: 25%;
.woocommerce-marketing-recommended-extensions-item {
padding: 12px;
text-decoration: none;
position: relative;
h4 {
color: $gray-900;
margin: -2px 0 ( $gap-smallest - 1 );
font-size: 16px;
line-height: 1.3;
transition: color 0.2s ease;
p {
color: $gray-700;
margin: 0;
&:hover {
color: var(--wp-admin-theme-color);
&__text {
padding-left: 46px;
.woocommerce-admin-marketing-product-icon {
position: absolute;
top: 12px;
left: 12px;