@layer components {
  .product-list__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-unit-m);
  }

  .product-list__slides {
    max-width: 100%;
  }

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

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