@layer blocks {
  .product-carousel {
    display: block;
    overflow: clip;
    overflow-clip-margin: 0.5rem;
    padding: 4rem 0;
  }
  @media (min-width: 1024px) {
    .product-carousel {
      padding: 6.5rem 0;
    }
  }
  .product-carousel--collapsed {
    padding-top: 0;
  }
  .product-carousel__title {
    margin: 0 0 1.5rem;
  }
  @media (min-width: 1024px) {
    .product-carousel__title {
      margin: 0 0 2rem;
    }
  }
  .product-carousel {
    --carousel-gap: 0.5rem;
    --carousel-slide-width: calc(100vw - 2 * 1.5rem);
  }
  @media (min-width: 768px) {
    .product-carousel {
      --carousel-slide-width: calc(50vw - 2 * 2.5rem);
    }
  }
  @media (min-width: 1024px) {
    .product-carousel {
      --carousel-slide-width: 26.25rem;
    }
  }
  .product-carousel__inner {
    box-sizing: content-box;
    margin-inline: auto;
    max-width: 100%;
    padding-inline: 1.5rem;
  }
  @media (min-width: 768px) {
    .product-carousel__inner {
      padding-inline: 3rem;
    }
  }
  @media (min-width: 1024px) {
    .product-carousel__inner {
      max-width: 120rem;
      padding-inline: 5rem;
    }
  }
  .product-carousel--collapsed .product-carousel__inner {
    padding: 0;
  }
}