//-------------------------------------------- 
// Sections
//--------------------------------------------
section {
  position: relative;
}

.section-padding {
  padding: 2em 1em;

  @media (min-width: $mq-small) {
    padding: 3em 2em;
  }

  @media (min-width: $mq-med) {
    padding: {
      right: 1em;
      left: 1em;
    }
  }

  @media (min-width: $mq-xlarge) {
    padding: {
      top: 4em;
      bottom: 4em;
    }
  }
}

.section-padding--double {
  padding: 4em 1em;

  @media (min-width: $mq-small) {
    padding: 6em 2em;
  }

  @media (min-width: $mq-med) {
    padding: {
      right: 1em;
      left: 1em;
    }
  }

  @media (min-width: $mq-xlarge) {
    padding: {
      top: 8em;
      bottom: 8em;
    }
  }
}

.section-padding--half {
  padding: 1em;

  @media (min-width: $mq-small) {
    padding: 1.5em 2em;
  }

  @media (min-width: $mq-med) {
    padding: {
      right: 1em;
      left: 1em;
    }
  }

  @media (min-width: $mq-xlarge) {
    padding: {
      top: 2em;
      bottom: 2em;
    }
  }
}

.section-padding--none {
  padding: {
    right: 1em;
    left: 1em;
  }

  @media (min-width: $mq-small) {
    padding: {
      right: 2em;
      left: 2em;
    }
  }

  @media (min-width: $mq-med) {
    padding: {
      right: 1em;
      left: 1em;
    }
  }
}

//-------------------------------------------- 
// Grid
//--------------------------------------------
.grid {
  @extend %auto-margin;

  width: 100%;
  max-width: $max-width;

  @media (min-width: $mq-med) {
    width: 65%;
  }

  @media (min-width: $mq-xlarge) {
    width: 50%;
  }
}

.grid-small {
  @extend %auto-margin;

  width: 100%;
  max-width: 38em;

  @media (min-width: $mq-med) {
    width: 50%;
  }
}

.grid-large {
  @extend %auto-margin;

  width: 100%;
  max-width: $max-width--lg;

  @media (min-width: $mq-med) {
    width: 80%;
  }

  @media (min-width: $mq-xlarge) {
    width: 65%;
  }
}

.grid-xlarge {
  @extend %auto-margin;

  width: 100%;

  @media (min-width: $mq-med) {
    width: 95%;
  }

  @media (min-width: $mq-xlarge) {
    width: 80%;
  }
}
