@layer components {
  .palette-slide {
    --carousel-track-radius: 1rem;
  }
  @media (min-width: 1024px) {
    .palette-slide {
      --carousel-track-radius: 1.5rem;
    }
  }
  .palette-slide {
    display: grid;
    grid-template-areas: "main" "accent1" "accent2" "white";
    grid-template-rows: repeat(4, 1fr);
    aspect-ratio: 1;
    width: 100%;
  }
  @media (min-width: 1024px) {
    .palette-slide {
      grid-template: "main accent1" "main accent2" "main white";
      grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(3, 1fr);
      aspect-ratio: 3/2;
    }
  }
  .palette-slide .color-swatch-card[data-color-role=main] {
    grid-area: main;
    border-radius: 1rem 1rem 0 0;
    --ps-focus-ring-radius: 1rem 1rem 0 0;
  }
  @media (min-width: 1024px) {
    .palette-slide .color-swatch-card[data-color-role=main] {
      border-radius: var(--carousel-track-radius) 0 0 var(--carousel-track-radius);
      --ps-focus-ring-radius: var(--carousel-track-radius) 0 0 var(--carousel-track-radius);
    }
  }
  .palette-slide .color-swatch-card[data-color-role=accent1] {
    grid-area: accent1;
    border-radius: 0;
  }
  @media (min-width: 1024px) {
    .palette-slide .color-swatch-card[data-color-role=accent1] {
      border-radius: 0 var(--carousel-track-radius) 0 0;
      --ps-focus-ring-radius: 0 var(--carousel-track-radius) 0 0;
    }
  }
  .palette-slide .color-swatch-card[data-color-role=accent2] {
    grid-area: accent2;
    border-radius: 0;
  }
  .palette-slide .color-swatch-card[data-color-role=white] {
    grid-area: white;
    border-radius: 0 0 1rem 1rem;
    --ps-focus-ring-radius: 0 0 1rem 1rem;
  }
  @media (min-width: 1024px) {
    .palette-slide .color-swatch-card[data-color-role=white] {
      border-radius: 0 0 var(--carousel-track-radius);
      --ps-focus-ring-radius: 0 0 var(--carousel-track-radius);
    }
  }
  .palette-slide .color-swatch-card:first-child .color-swatch-card__inner {
    border-radius: 1rem 1rem 0 0;
  }
  @media (min-width: 1024px) {
    .palette-slide .color-swatch-card:first-child .color-swatch-card__inner {
      border-radius: 1.5rem 0 0 1.5rem;
      margin-bottom: 0.0625rem;
    }
  }
  .palette-slide .color-swatch-card:last-child .color-swatch-card__inner {
    border-radius: 0 0 1rem 1rem;
  }
  @media (min-width: 1024px) {
    .palette-slide .color-swatch-card:last-child .color-swatch-card__inner {
      border-radius: 0 0 var(--carousel-track-radius) 0;
    }
  }
  .palette-slide .color-swatch-card {
    --csc-aspect-ratio: auto;
    --csc-radius: 0;
    --ps-focus-ring-radius: 0;
    min-height: 0;
  }
  .palette-slide .color-swatch-card:has(.color-swatch-card__discover-link:focus-visible), .palette-slide .color-swatch-card:has(.color-swatch-card__trigger:focus-visible), .palette-slide .color-swatch-card:focus-visible {
    outline: none;
  }
  .palette-slide .color-swatch-card:has(.color-swatch-card__discover-link:focus-visible)::after, .palette-slide .color-swatch-card:has(.color-swatch-card__trigger:focus-visible)::after, .palette-slide .color-swatch-card:focus-visible::after {
    border: 0.125rem solid var(--theme-focus-primary);
    border-radius: var(--ps-focus-ring-radius);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 5;
  }
  @media (min-width: 1024px) {
    .palette-slide .color-swatch-card {
      max-height: none;
    }
  }
  .palette-slide .color-swatch-card.is-morphing {
    z-index: 10;
    pointer-events: auto;
    transition: top 0.45s cubic-bezier(0.5, 0, 0, 1), left 0.45s cubic-bezier(0.5, 0, 0, 1), width 0.45s cubic-bezier(0.5, 0, 0, 1), height 0.45s cubic-bezier(0.5, 0, 0, 1), border-radius 0.45s cubic-bezier(0.5, 0, 0, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    .palette-slide .color-swatch-card.is-morphing {
      transition-duration: 0ms;
    }
  }
  .palette-slide .color-swatch-card:has(~ .color-swatch-card.is-morphing), .palette-slide .color-swatch-card.is-morphing ~ .color-swatch-card {
    pointer-events: none;
  }
}