@layer blocks {
  .color-visualizer {
    color: var(--theme-text-primary);
  }
  .color-visualizer__content-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  @media (min-width: 1024px) {
    .color-visualizer__content-column {
      gap: 2rem;
    }
  }
  .color-visualizer__text-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .color-visualizer__cta {
    width: 100%;
  }
  @media (min-width: 1024px) {
    .color-visualizer__cta {
      width: auto;
      align-self: flex-start;
    }
  }
  .color-visualizer__picture {
    aspect-ratio: 2/3;
    border-radius: 1rem;
    display: block;
    overflow: clip;
    width: 100%;
  }
  @media (min-width: 1024px) {
    .color-visualizer__picture {
      aspect-ratio: 3/2;
      border-radius: 1.5rem;
    }
  }
  .color-visualizer__picture img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
}