.section
  max-width: 1440px
  margin: 0 auto
  background-size: cover
  background-position: center

  &__content
    display: grid
    max-width: 1200px
    position: relative
    margin: 0 auto
    grid-template-columns: repeat(12,82px)
    grid-column-gap: 20px
    justify-content: center
    @media screen and (max-width: 1200px)
        grid-template-columns: repeat(12, 1fr)
        grid-column-gap: 20px
        margin-left: 60px
        margin-right: 60px
    @media screen and (max-width: 600px)
        margin-left: 30px
        margin-right: 30px

  &__header
    width: 100%
    z-index: 1
    padding-top: 40px
    padding-bottom: 20px
    &-content
        align-items: center
        display: flex
        justify-content: space-between
    &__nav-item
        margin-right: 36px
        padding-bottom: 10px
        list-style: none
        display: inline-block
        @media screen and (max-width: 900px)
            margin-left: 12px
            margin-right: 12px
        &:last-child
            margin-right: 40px
            @media screen and (max-width: 900px)
                margin-right: 24px
  &__padded
    padding-top: 3rem
    padding-bottom: 3rem

  &--fluid
    max-width: 100%

  &--dark
    background-color: $dark-bg

  &--semi-dark 
    background-color: $secondary-bg

  &__hero
    height: 650px
    background-size: cover
    background-repeat: no-repeat
    background-position: center
    display: flex
    justify-content: flex-start
    align-items: center
    &-content
        display: flex
        justify-content: flex-start
        align-items: center
        color: white
        height: 100%

.flex 
  display: flex

  &-row
    flex-direction: row

  &-v
    &-center 
        align-items: center
    &-bottom 
        align-items: flex-end
    &-top 
        align-items: flex-start

  &-h
    &-center 
        justify-content: center
    &-right  
        justify-content: flex-end
    &-left   
        justify-content: flex-start

.col
    @for $i from 1 through 12
        &-#{$i}
            grid-column: span $i

        //column media queries under 900px (md)
        &-md-#{$i}-down
            @media screen and (max-width: 900px)
                grid-column: span $i !important

        &-sm-#{$i}-down 
            @media screen and (max-width: 600px) 
                grid-column: span $i !important

.text-left
    text-align: left