@layer blocks {
  .palette-carousel {
    overflow: hidden;
    background-color: var(--theme-surface-primary);
  }
  .palette-carousel__inner {
    padding-block: 4rem;
  }
  @media (min-width: 1024px) {
    .palette-carousel__inner {
      padding-block: 6rem;
    }
  }
  .palette-carousel__header {
    margin-bottom: 1.5rem;
    gap: 4rem;
  }
  @media (min-width: 1024px) {
    .palette-carousel__header {
      margin-bottom: 4rem;
      gap: unset;
    }
  }
  .palette-carousel__header-content {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  @media (min-width: 768px) {
    .palette-carousel__header-content {
      grid-column: span 8;
    }
  }
  @media (min-width: 1024px) {
    .palette-carousel__header-content {
      grid-column: span 6;
    }
  }
  @media (min-width: 1024px) {
    .palette-carousel__description {
      width: 60%;
    }
  }
  @media (min-width: 1200px) {
    .palette-carousel__description {
      width: 50%;
    }
  }
  .palette-carousel__control {
    grid-column: span 4;
    align-self: end;
  }
  @media (min-width: 768px) {
    .palette-carousel__control {
      grid-column: span 8;
    }
  }
  @media (min-width: 1024px) {
    .palette-carousel__control {
      grid-column: 9/span 4;
    }
  }
  @media (min-width: 1200px) {
    .palette-carousel__control {
      grid-column: 10/span 3;
    }
  }
  .palette-carousel__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .palette-carousel__panel:focus-visible {
    outline: 0.125rem solid var(--theme-focus-primary);
    outline-offset: 0.25rem;
  }
}