@layer blocks {
  .room-carousel {
    background-color: var(--room-carousel-bg, transparent);
    color: var(--theme-text-primary);
    transition: background-color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .room-carousel .sticky-grid {
    padding-block: 3rem;
  }
  @media (min-width: 1024px) {
    .room-carousel .sticky-grid {
      padding-block: 6.5rem;
    }
  }
  .room-carousel__editorial {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .room-carousel__intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .room-carousel__cta-desktop {
    display: none;
  }
  @media (min-width: 1024px) {
    .room-carousel__cta-desktop {
      display: block;
    }
  }
  .room-carousel__viewer {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  @media (min-width: 1024px) {
    .room-carousel__mobile-cta {
      display: none;
    }
  }
  .room-carousel__carousels {
    position: relative;
    --carousel-slide-width: 100%;
  }
  .room-carousel .carousel__slide picture {
    border-radius: 1rem;
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .room-carousel .carousel__slide picture {
      border-radius: 1.5rem;
    }
  }
  .room-carousel .carousel__slide img {
    border-radius: 1.5rem;
    aspect-ratio: 2/3;
    object-fit: cover;
  }
  @media (min-width: 1024px) {
    .room-carousel .carousel__slide img {
      aspect-ratio: 3/2;
    }
  }
  .room-carousel__room-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2/3;
    object-fit: cover;
  }
  @media (min-width: 1024px) {
    .room-carousel__room-image {
      aspect-ratio: 3/2;
    }
  }
  .room-carousel__color-slide {
    position: relative;
  }
  @media (max-width: 1023px) {
    .room-carousel__color-slide:has(.color-swatch-card[data-state=open])::after {
      border: 2px solid var(--theme-border-primary);
      border-radius: 1.5rem;
      content: "";
      inset: 2px;
      pointer-events: none;
      position: absolute;
      z-index: 5;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .room-carousel.color-swatch,
    .room-carousel.color-swatch .color-swatch-card {
      transition: none;
    }
  }
  .room-carousel.color-swatch .sticky-grid {
    padding-block: 4rem;
  }
  @media (min-width: 1024px) {
    .room-carousel.color-swatch .sticky-grid {
      padding-block: 6.5rem;
    }
  }
  .room-carousel.color-swatch {
    --carousel-track-radius: 1rem;
  }
  .room-carousel.color-swatch .carousel__slide picture,
  .room-carousel.color-swatch .carousel__slide img {
    border-radius: 1rem;
  }
  @media (min-width: 1024px) {
    .room-carousel.color-swatch {
      --carousel-track-radius: 1.5rem;
    }
    .room-carousel.color-swatch .carousel__slide picture,
    .room-carousel.color-swatch .carousel__slide img {
      border-radius: 1.5rem;
    }
  }
  .room-carousel.color-swatch .room-carousel__swatch-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  @media (min-width: 1024px) {
    .room-carousel.color-swatch .room-carousel__swatch-wrapper .color-swatch-card {
      position: absolute;
      inset: auto;
      left: 1.5rem;
      bottom: 1.5rem;
      width: 12.9375rem;
      height: 12.9375rem;
    }
  }
}