.container {
  width: 90%;
  margin: auto;

  &-large { max-width: $containerLarge; }
  &-medium { max-width: $containerMedium; }
  &-small { max-width: $containerSmall; }
  &-narrow { max-width: $containerNarrow; }
}

.section {
  padding: $sectionSmall;

  @media (min-width: $screen-md) {
    padding: $sectionMedium;
  }

  @media (min-width: $screen-lg) {
    padding: $sectionLarge;
  }

  &-small { padding: $sectionSmall; }
  &-medium { padding: $sectionMedium; }
  &-large { padding: $sectionLarge; }

  &-zero-top { padding-top: 0; }
  &-zero-bottom { padding-bottom: 0; }
}

.inner {
  padding: $innerMedium;

  &-small { padding: $innerSmall; }
  &-large { padding: $innerLarge; }
}

.rounded {
  border-radius: $borderRadius;

  &-top {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  &-bottom {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }
}

.border {
  border-style: solid;
  border-width: $borderWidth;

  &-thin { border-width: 0.0625em; }
  &-regular { border-width: $borderWidth; }
  &-thick { border-width: $borderThick; }
  &-thicker { border-width: $borderThicker; }

  &-top {
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 0;
  }

  &-right {
    border-top-width: 0;
    border-bottom-width: 0;
    border-left-width: 0;
  }

  &-bottom {
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
  }

  &-left {
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
  }
}
