@layer components {
  .product-image-carousel {
    display: flex;
    flex-direction: column;
    --carousel-slide-width: 100%;
  }
  .product-image-carousel .carousel__track-clip {
    background: var(--theme-surface-secondary);
  }
  .product-image-carousel picture {
    display: block;
    aspect-ratio: 1;
    padding: 2rem;
  }
  @media (min-width: 768px) {
    .product-image-carousel picture {
      padding: 4rem;
    }
  }
  @media (min-width: 1200px) {
    .product-image-carousel picture {
      padding: 5rem;
    }
  }
  .product-image-carousel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  @media (min-width: 1024px) {
    .product-image-carousel .carousel {
      --carousel-track-radius: 1.5rem;
    }
  }
  .product-image-carousel .carousel__controls {
    --carousel-controls-padding-top: 1.5rem;
  }
  @media (min-width: 1024px) {
    .product-image-carousel .carousel__controls {
      --carousel-controls-padding-top: 2rem;
    }
  }
}