:root {
  --rad--grid-gap: 1rem;
  --rad--content-width-narrow: 50rem;
  --rad--content-width-normal: 55rem;
  --rad--content-width-wide: 60rem;
  --layout-block-margins: 0;
}

.rad-layout {
  margin-block: var(--layout-block-margins);
}

.rad-columns__wrapper--has-grid-gaps {
  
  grid-gap: var(--rad--grid-gap);
}

.layout-width--normal {
  width: var(--rad--content-width-normal);

  margin-left: calc(50% - var(--rad--content-width-normal) / 2);
  margin-right: calc(50% - var(--rad--content-width-normal) / 2);
}

.layout-width--wide {
  width: var(--rad--content-width-wide);

  margin-left: calc(50% - var(--rad--content-width-wide) / 2);
  margin-right: calc(50% - var(--rad--content-width-wide) / 2);
}

.layout-width--full {
  /* width: 100vw had some bugs */
  width: 100%;

  /* why did we even do this? It's causing a bug. */
  /*margin-left: calc(50% - 50vw);*/
  /*margin-right: calc(50% - 50vw);*/
}

.layout-width--narrow {
  width: var(--rad--content-width-narrow);

  margin-left: calc(50% - var(--rad--content-width-narrow) / 2);
  margin-right: calc(50% - var(--rad--content-width-narrow) / 2);
}


.layout-margins--small {
  --layout-block-margins: 1rem;
}

.layout-margins--normal {
  --layout-block-margins: 2rem;
}

.layout-margins--large {
  --layout-block-margins: 3rem;
}

/* Testing Having these styles removed and letting the theme handle implementing the inner width on a component level */

.layout-width--full.layout-inner-width--narrow > * {
  max-width: var(--rad--content-width-narrow);
  margin: 0 auto;
}

.layout-width--full.layout-inner-width--normal > * {
  max-width: var(--rad--content-width-normal);
  margin: 0 auto;
}

.layout-width--full.layout-inner-width--wide > * {
  max-width: var(--rad--content-width-wide);
  margin: 0 auto;
}