@use 'sass:color';
@use '../breakpoints';
@use '../config/color/brand';

// Use h2 sizes for condensed header
.sl-r-banner-playground h1 {
  @include breakpoints.sl-breakpoint--medium {
    --h1-size: var(--sl-font-size--xx-large);
  }

  @include breakpoints.sl-breakpoint--large {
    --h1-size: var(--sl-font-size--xxx-large);
  }
}

.playground-wrapper {
  display: flex;
  gap: var(--sl-gutter);

  > div {
    // Duplicated from fun fact- should this be defined elsewhere?
    border: var(--sl-border--small) solid
      color.adjust(brand.$sl-color--patina, $lightness: 32%);
    flex: 50%;
  }
}