.product-recommendations {
  margin-top: 4em;
  display: block;
}

.product-recommendations ul {
  padding: calc(var(--size-gut)*2);
}

.product-recommendations:not(.product-recommendations--loaded) {
  padding: 0;
  margin: 0;
}

.product-recommendations__heading {
  text-align: center;
  margin: 0;
  margin-bottom: 3rem;
}

@media screen and (min-width: 750px) {
  :root {
    --card-text-alignment: center;
  }
}