@layer components {
  .collection {
    --collection-card-rotation: 8deg;
    --collection-card-translate-y: 4%;
    --carousel-slide-width: calc(100vw / 1.7);
    --carousel-gap: 0.75rem;
    background-color: var(--theme-surface-primary);
    padding-block: 6.5rem;
    overflow: clip;
  }
  @media (max-width: 1023px) {
    .collection {
      --collection-card-rotation: 16deg;
      --collection-card-translate-y: 8%;
      padding-block: 4rem;
    }
  }
  .collection__carousel {
    overflow: visible;
  }
  .collection__carousel-slide {
    transform: rotate(calc(var(--slide-pos) * var(--collection-card-rotation))) translateY(calc(var(--slide-pos) * var(--slide-pos) * var(--collection-card-translate-y))) translateZ(0);
  }
  .collection__carousel-slide--active {
    z-index: 1;
  }
  .collection__carousel-slide--active .collection__card picture,
  .collection__carousel-slide--active .collection__card::before {
    opacity: 1;
  }
  @media (max-width: 1023px) {
    .collection__carousel-track-clip {
      overflow: visible;
    }
  }
  .collection__carousel-track--animating .collection__carousel-slide {
    transition: transform 0.45s cubic-bezier(0.5, 0, 0, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    .collection__carousel-track--animating .collection__carousel-slide {
      transition-duration: 0ms;
    }
  }
  .collection__carousel-slide {
    background-color: var(--collection-slide-bg, transparent);
    border-radius: 1rem;
  }
  @media (min-width: 1024px) {
    .collection__carousel-slide {
      border-radius: 1.5rem;
    }
  }
  .collection__carousel-controls {
    margin-top: 3rem;
    padding-top: 0;
  }
  .collection__fan {
    box-sizing: content-box;
    margin-inline: auto;
    max-width: 100%;
    padding-inline: 1.5rem;
  }
  @media (min-width: 768px) {
    .collection__fan {
      padding-inline: 3rem;
    }
  }
  @media (min-width: 1024px) {
    .collection__fan {
      max-width: 120rem;
      padding-inline: 5rem;
    }
  }
  .collection__fan {
    display: flex;
    justify-content: center;
    overflow: visible;
    padding-bottom: 4rem;
    max-width: 65rem;
  }
  .collection__fan .collection__card {
    flex: 1;
    max-width: 27rem;
    transform: rotate(calc(var(--slide-pos) * var(--collection-card-rotation))) translateY(calc(var(--slide-pos) * var(--slide-pos) * var(--collection-card-translate-y))) translateZ(0);
  }
  .collection__fan .collection__card:hover {
    z-index: 1;
  }
  .collection__fan .collection__card:first-child {
    --slide-pos: -1;
  }
  .collection__fan .collection__card:last-child {
    --slide-pos: 1;
  }
  .collection__fan:not(:has(> *:hover)) > :nth-child(2).collection__card picture {
    opacity: 1;
  }
  .collection__fan:not(:has(> *:hover)) > :nth-child(2).collection__card::before {
    opacity: 1;
  }
  .collection__card {
    --color-swatch-card-image-ratio: 2/3;
    --color-swatch-card-image-radius: 0px;
    clip-path: inset(0 round 1rem);
  }
  @media (min-width: 1024px) {
    .collection__card {
      clip-path: inset(0 round 1.5rem);
    }
  }
  @media (max-width: 1023px) {
    .collection__card {
      transform: translateZ(0);
    }
  }
  .collection__header {
    box-sizing: content-box;
    margin-inline: auto;
    max-width: 100%;
    padding-inline: 1.5rem;
  }
  @media (min-width: 768px) {
    .collection__header {
      padding-inline: 3rem;
    }
  }
  @media (min-width: 1024px) {
    .collection__header {
      max-width: 120rem;
      padding-inline: 5rem;
    }
  }
  .collection__header {
    padding-block-end: 4rem;
    text-align: center;
  }
  .collection__heading {
    margin-block-end: 1rem;
  }
  .collection__heading:last-child {
    margin-block-end: 0;
  }
  .collection__description {
    color: var(--theme-text-primary);
  }
  @media (max-width: 1023px) {
    .collection__cta {
      width: 100%;
    }
  }
  .collection__footer {
    box-sizing: content-box;
    margin-inline: auto;
    max-width: 100%;
    padding-inline: 1.5rem;
  }
  @media (min-width: 768px) {
    .collection__footer {
      padding-inline: 3rem;
    }
  }
  @media (min-width: 1024px) {
    .collection__footer {
      max-width: 120rem;
      padding-inline: 5rem;
    }
  }
  .collection__footer {
    margin-block-start: 4rem;
    text-align: center;
  }
}