/**
 * @file
 * Provides layout styling for regions.
 */

.region {
  padding-top: var(--layoutDefaultSpacing);
  padding-bottom: var(--layoutDefaultSpacing);
}

.region--full-width {
  --layoutDefaultSpacing: 0;
  --layoutWidth: none;
}

.region--highlighted {
  --layoutDefaultSpacing: 0;
  --layoutWidth: var(--layoutContentWidth);
}

.region--content {
  --layoutDefaultSpacing: var(--layoutContentSpacing);
  --layoutWidth: var(--layoutContentWidth);
}

.region__wrapper {
  width: 100%;
  max-width: var(--layoutWidth);
  margin: auto;
}

@media (min-width: 32em) {
  .region--image-background {
    background: var(--regionBgImage, none) no-repeat right center / cover;
  }
}

@media (min-width: 32em) and (max-width: 75em) {
  .region--image-background {
    box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.6);
  }
}