@layer components {
  .product-recommendations {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-unit-l);
  }

  .product-recommendations__heading {
    text-align: center;
  }

  .product-recommendations__item {
    padding-inline: calc(var(--spacing-unit-xs) / 2);

    @media screen and (min-width: 768px), print {
      padding-inline: calc(var(--spacing-unit-m) / 2);
    }
  }
}