/* Settings */
:root {
  --grid-overlay__bg--xs: hsla(4, 48%, 74%, .25);
  --grid-overlay__bg--sm: hsla(178, 52%, 58%, .25);
  --grid-overlay__bg--md: hsla(204, 80%, 72%, .25);
  --grid-overlay__bg--lg: hsla(286, 51%, 44%, .12);
  --grid-overlay__color--xs: hsla(4, 48%, 74%, .75);
  --grid-overlay__color--sm: hsla(178, 52%, 58%, .75);
  --grid-overlay__color--md: hsla(204, 80%, 72%, .75);
  --grid-overlay__color--lg: hsla(286, 51%, 44%, .75);
  --gutter: 32px;
  --container: 1280px;
  --offset: calc(var(--gutter) / 2);
  --max_width: calc(var(--container) - var(--gutter));
  --grid-overlay__color: var(--grid-overlay__color--xs);
  --columns: 1;
  --baseline: 1.5rem;
  --baseline-shift: 0;
  --background-color: var(--grid-overlay__bg--xs);
  --media-query: 'extra small (xs)'; }

@media (min-width: 321px) {
  :root {
    --background-color: var(--grid-overlay__bg--sm);
    --grid-overlay__color: var(--grid-overlay__color--sm);
    --columns: 3;
    --media-query: 'small (sm)'; } }

@media (min-width: 721px) {
  :root {
    --background-color: var(--grid-overlay__bg--md);
    --grid-overlay__color: var(--grid-overlay__color--md);
    --columns: 6;
    --media-query: 'medium (md)'; } }

@media (min-width: 1140px) {
  :root {
    --background-color: var(--grid-overlay__bg--lg);
    --color: var(--grid-overlay__color--lg);
    --columns: 12;
    --media-query: 'large (lg)';
    --max_width: calc(var(--container) - var(--gutter)); } }

/*
@include media-breakpoint-up(sm) {
  :root {
    --columns: 6;
    --media-query: 'small (sm)';
  }
}

@include media-breakpoint-up(md) {
  :root {
    --background-color: map-get($column-background-colors, md);
    --color: map-get($column-colors, md);
    --gutter: map-get($grid-gutter-widths, md);
    --media-query: 'medium (md)';
    --max_width: map-get($container-max-widths, md) - map-get($grid-gutter-widths, md);
    //--offset: 0;
  }
}
*/
/*@media (--break-md) {
  :root {
    --background-color: var(--grid-overlay__bg--lg);
    --color: var(--grid-overlay__color--lg);
    --columns: 12;
    --gutter: var(--grid-gutter);
    --media-query: 'large (lg)';
    --max_width: calc(var(--container) - var(--grid-gutter));
  }
}*/
/*
@include media-breakpoint-up(xl) {
  :root {
    --background-color: map-get($column-background-colors, xl);
    --color: map-get($column-colors, xl);
    --columns: 12;
    --gutter: map-get($grid-gutter-widths, xl);
    --media-query: 'extra large (xl)';
    --max_width: map-get($container-max-widths, xl) - map-get($grid-gutter-widths, xl);
  }
}
*/
:root {
  --repeating-width: calc(100% / var(--columns));
  --column-width: calc((100% / var(--columns)) - var(--gutter));
  --background-width: calc(100% + var(--gutter));
  --background-columns: repeating-linear-gradient(
    to right,
    var(--background-color),
    var(--background-color) var(--column-width),
    transparent var(--column-width),
    transparent var(--repeating-width)
  );
  --background-baseline: repeating-linear-gradient(
    to bottom,
    var(--background-color),
    var(--background-color) 1px,
    transparent 1px,
    transparent var(--baseline)
  ); }

.u-grid-overlay {
  position: relative; }
  .u-grid-overlay h1, .u-grid-overlay h2, .u-grid-overlay h3, .u-grid-overlay h4, .u-grid-overlay h5, .u-grid-overlay h6, .u-grid-overlay p {
    background-color: var(--background-color); }

.u-grid-overlay::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  width: calc(100% - (2 * var(--offset)));
  max-width: var(--max_width);
  min-height: 100vh;
  content: '';
  background-image: var(--background-columns), var(--background-baseline);
  background-size: var(--background-width) 100%;
  background-position: 0 var(--baseline-shift);
  z-index: 1200;
  pointer-events: none; }

.u-grid-overlay::after {
  content: var(--media-query);
  position: fixed;
  top: 1rem;
  left: 1rem;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  color: var(--grid-overlay__color); }

:root {
  --qa-color--red: rgba(255, 55, 69, 0.5);
  --qa-color--green: rgba(75, 255, 65, 0.5);
  --qa-color--blue: rgba(0, 85, 255, 0.5);
  --qa-bg--red: rgba(255, 55, 69, 0.25);
  --qa-bg--green: rgba(75, 255, 65, 0.25);
  --qa-bg--blue: rgba(0, 85, 255, 0.25)
; }

.qa--red {
  outline: 2px solid var(--qa-color--red); }

.qa--green {
  outline: 2px solid var(--qa-color--green); }

.qa--blue {
  outline: 2px solid var(--qa-color--blue); }

.qa-bg--red {
  background-color: var(--qa-bg--red); }

.qa-bg--green {
  background-color: var(--qa-bg--green); }

.qa-bg--blue {
  background-color: var(--qa-bg--blue); }

[class*=qa-pos] {
  z-index: 1200;
  background-color: rgba(255, 255, 255, 0.85); }

.qa-pos--top-right {
  position: absolute;
  top: 0;
  right: 0; }

.qa-pos--bottom-right {
  position: fixed;
  bottom: 0;
  right: 0; }