@import '../../../custom-media.css';
@import '../../../custom-properties/color.css';

.custom-media-demo {
  padding: 4rem 0;
  width: 100%;

  @media (--small) {
    background: var(--brand-l3);
  }

  @media (--medium) {
    background: var(--brand-l2);
  }

  @media (--large) {
    background: var(--brand-l1);
  }

  & .small-only {
    display: none;
    @media (--small) {
      display: block;
    }
  }

  & .medium-only {
    display: none;
    @media (--medium) {
      display: block;
    }
  }

  & .large-only {
    display: none;
    @media (--large) {
      display: block;
    }
  }
}