@supports not (grid-column: auto/span 3){

  @media (min-width:576px) {
      [class*=" grid-"],
      [class^=grid-] {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
          -ms-flex-direction: row;
          flex-direction: row;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap
      }
      [class*=" grid-"]>*,
      [class^=grid-]>* {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          min-width: 0;
          min-height: 0
      }
  }

  @media (min-width:576px) {
      .grid,
      .grid--reverse {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex
      }
      .grid--reverse>*,
      .grid>* {
          -webkit-box-flex: 1;
          -ms-flex: 1 1 0%;
          flex: 1 1;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          min-width: 0;
          min-height: 0
      }
      .grid--reverse.has-gutter>*+*,
      .grid.has-gutter>*+* {
          margin-left: calc(1rem - .01px)
      }
      .grid--reverse.has-gutter-l>*+*,
      .grid.has-gutter-l>*+* {
          margin-left: calc(2rem - .01px)
      }
      .grid--reverse.has-gutter-xl>*+*,
      .grid.has-gutter-xl>*+* {
          margin-left: calc(4rem - .01px)
      }
  }

  @media (min-width:576px) {
      [class*=grid-2]>* {
          width: calc(50% - .01px)
      }
      [class*=grid-2].has-gutter {
          margin-right: -.5rem;
          margin-left: -.5rem
      }
      [class*=grid-2].has-gutter>* {
          width: calc(50% - 1rem - .01px);
          margin-right: .5rem;
          margin-left: .5rem
      }
      [class*=grid-2].has-gutter-l {
          margin-right: -1rem;
          margin-left: -1rem
      }
      [class*=grid-2].has-gutter-l>* {
          width: calc(50% - 2rem - .01px);
          margin-right: 1rem;
          margin-left: 1rem
      }
      [class*=grid-2].has-gutter-xl {
          margin-right: -2rem;
          margin-left: -2rem
      }
      [class*=grid-2].has-gutter-xl>* {
          width: calc(50% - 4rem - .01px);
          margin-right: 2rem;
          margin-left: 2rem
      }
      [class*=grid-3]>* {
          width: calc(33.33333% - .01px)
      }
      [class*=grid-3].has-gutter {
          margin-right: -.5rem;
          margin-left: -.5rem
      }
      [class*=grid-3].has-gutter>* {
          width: calc(33.33333% - 1rem - .01px);
          margin-right: .5rem;
          margin-left: .5rem
      }
      [class*=grid-3].has-gutter-l {
          margin-right: -1rem;
          margin-left: -1rem
      }
      [class*=grid-3].has-gutter-l>* {
          width: calc(33.33333% - 2rem - .01px);
          margin-right: 1rem;
          margin-left: 1rem
      }
      [class*=grid-3].has-gutter-xl {
          margin-right: -2rem;
          margin-left: -2rem
      }
      [class*=grid-3].has-gutter-xl>* {
          width: calc(33.33333% - 4rem - .01px);
          margin-right: 2rem;
          margin-left: 2rem
      }
      [class*=grid-4]>* {
          width: calc(25% - .01px)
      }
      [class*=grid-4].has-gutter {
          margin-right: -.5rem;
          margin-left: -.5rem
      }
      [class*=grid-4].has-gutter>* {
          width: calc(25% - 1rem - .01px);
          margin-right: .5rem;
          margin-left: .5rem
      }
      [class*=grid-4].has-gutter-l {
          margin-right: -1rem;
          margin-left: -1rem
      }
      [class*=grid-4].has-gutter-l>* {
          width: calc(25% - 2rem - .01px);
          margin-right: 1rem;
          margin-left: 1rem
      }
      [class*=grid-4].has-gutter-xl {
          margin-right: -2rem;
          margin-left: -2rem
      }
      [class*=grid-4].has-gutter-xl>* {
          width: calc(25% - 4rem - .01px);
          margin-right: 2rem;
          margin-left: 2rem
      }
      [class*=grid-5]>* {
          width: calc(20% - .01px)
      }
      [class*=grid-5].has-gutter {
          margin-right: -.5rem;
          margin-left: -.5rem
      }
      [class*=grid-5].has-gutter>* {
          width: calc(20% - 1rem - .01px);
          margin-right: .5rem;
          margin-left: .5rem
      }
      [class*=grid-5].has-gutter-l {
          margin-right: -1rem;
          margin-left: -1rem
      }
      [class*=grid-5].has-gutter-l>* {
          width: calc(20% - 2rem - .01px);
          margin-right: 1rem;
          margin-left: 1rem
      }
      [class*=grid-5].has-gutter-xl {
          margin-right: -2rem;
          margin-left: -2rem
      }
      [class*=grid-5].has-gutter-xl>* {
          width: calc(20% - 4rem - .01px);
          margin-right: 2rem;
          margin-left: 2rem
      }
      [class*=grid-6]>* {
          width: calc(16.66667% - .01px)
      }
      [class*=grid-6].has-gutter {
          margin-right: -.5rem;
          margin-left: -.5rem
      }
      [class*=grid-6].has-gutter>* {
          width: calc(16.66667% - 1rem - .01px);
          margin-right: .5rem;
          margin-left: .5rem
      }
      [class*=grid-6].has-gutter-l {
          margin-right: -1rem;
          margin-left: -1rem
      }
      [class*=grid-6].has-gutter-l>* {
          width: calc(16.66667% - 2rem - .01px);
          margin-right: 1rem;
          margin-left: 1rem
      }
      [class*=grid-6].has-gutter-xl {
          margin-right: -2rem;
          margin-left: -2rem
      }
      [class*=grid-6].has-gutter-xl>* {
          width: calc(16.66667% - 4rem - .01px);
          margin-right: 2rem;
          margin-left: 2rem
      }
      [class*=grid-7]>* {
          width: calc(14.28571% - .01px)
      }
      [class*=grid-7].has-gutter {
          margin-right: -.5rem;
          margin-left: -.5rem
      }
      [class*=grid-7].has-gutter>* {
          width: calc(14.28571% - 1rem - .01px);
          margin-right: .5rem;
          margin-left: .5rem
      }
      [class*=grid-7].has-gutter-l {
          margin-right: -1rem;
          margin-left: -1rem
      }
      [class*=grid-7].has-gutter-l>* {
          width: calc(14.28571% - 2rem - .01px);
          margin-right: 1rem;
          margin-left: 1rem
      }
      [class*=grid-7].has-gutter-xl {
          margin-right: -2rem;
          margin-left: -2rem
      }
      [class*=grid-7].has-gutter-xl>* {
          width: calc(14.28571% - 4rem - .01px);
          margin-right: 2rem;
          margin-left: 2rem
      }
      [class*=grid-8]>* {
          width: calc(12.5% - .01px)
      }
      [class*=grid-8].has-gutter {
          margin-right: -.5rem;
          margin-left: -.5rem
      }
      [class*=grid-8].has-gutter>* {
          width: calc(12.5% - 1rem - .01px);
          margin-right: .5rem;
          margin-left: .5rem
      }
      [class*=grid-8].has-gutter-l {
          margin-right: -1rem;
          margin-left: -1rem
      }
      [class*=grid-8].has-gutter-l>* {
          width: calc(12.5% - 2rem - .01px);
          margin-right: 1rem;
          margin-left: 1rem
      }
      [class*=grid-8].has-gutter-xl {
          margin-right: -2rem;
          margin-left: -2rem
      }
      [class*=grid-8].has-gutter-xl>* {
          width: calc(12.5% - 4rem - .01px);
          margin-right: 2rem;
          margin-left: 2rem
      }
      [class*=grid-9]>* {
          width: calc(11.11111% - .01px)
      }
      [class*=grid-9].has-gutter {
          margin-right: -.5rem;
          margin-left: -.5rem
      }
      [class*=grid-9].has-gutter>* {
          width: calc(11.11111% - 1rem - .01px);
          margin-right: .5rem;
          margin-left: .5rem
      }
      [class*=grid-9].has-gutter-l {
          margin-right: -1rem;
          margin-left: -1rem
      }
      [class*=grid-9].has-gutter-l>* {
          width: calc(11.11111% - 2rem - .01px);
          margin-right: 1rem;
          margin-left: 1rem
      }
      [class*=grid-9].has-gutter-xl {
          margin-right: -2rem;
          margin-left: -2rem
      }
      [class*=grid-9].has-gutter-xl>* {
          width: calc(11.11111% - 4rem - .01px);
          margin-right: 2rem;
          margin-left: 2rem
      }
      [class*=grid-10]>* {
          width: calc(10% - .01px)
      }
      [class*=grid-10].has-gutter {
          margin-right: -.5rem;
          margin-left: -.5rem
      }
      [class*=grid-10].has-gutter>* {
          width: calc(10% - 1rem - .01px);
          margin-right: .5rem;
          margin-left: .5rem
      }
      [class*=grid-10].has-gutter-l {
          margin-right: -1rem;
          margin-left: -1rem
      }
      [class*=grid-10].has-gutter-l>* {
          width: calc(10% - 2rem - .01px);
          margin-right: 1rem;
          margin-left: 1rem
      }
      [class*=grid-10].has-gutter-xl {
          margin-right: -2rem;
          margin-left: -2rem
      }
      [class*=grid-10].has-gutter-xl>* {
          width: calc(10% - 4rem - .01px);
          margin-right: 2rem;
          margin-left: 2rem
      }
      [class*=grid-11]>* {
          width: calc(9.09091% - .01px)
      }
      [class*=grid-11].has-gutter {
          margin-right: -.5rem;
          margin-left: -.5rem
      }
      [class*=grid-11].has-gutter>* {
          width: calc(9.09091% - 1rem - .01px);
          margin-right: .5rem;
          margin-left: .5rem
      }
      [class*=grid-11].has-gutter-l {
          margin-right: -1rem;
          margin-left: -1rem
      }
      [class*=grid-11].has-gutter-l>* {
          width: calc(9.09091% - 2rem - .01px);
          margin-right: 1rem;
          margin-left: 1rem
      }
      [class*=grid-11].has-gutter-xl {
          margin-right: -2rem;
          margin-left: -2rem
      }
      [class*=grid-11].has-gutter-xl>* {
          width: calc(9.09091% - 4rem - .01px);
          margin-right: 2rem;
          margin-left: 2rem
      }
      [class*=grid-12]>* {
          width: calc(8.33333% - .01px)
      }
      [class*=grid-12].has-gutter {
          margin-right: -.5rem;
          margin-left: -.5rem
      }
      [class*=grid-12].has-gutter>* {
          width: calc(8.33333% - 1rem - .01px);
          margin-right: .5rem;
          margin-left: .5rem
      }
      [class*=grid-12].has-gutter-l {
          margin-right: -1rem;
          margin-left: -1rem
      }
      [class*=grid-12].has-gutter-l>* {
          width: calc(8.33333% - 2rem - .01px);
          margin-right: 1rem;
          margin-left: 1rem
      }
      [class*=grid-12].has-gutter-xl {
          margin-right: -2rem;
          margin-left: -2rem
      }
      [class*=grid-12].has-gutter-xl>* {
          width: calc(8.33333% - 4rem - .01px);
          margin-right: 2rem;
          margin-left: 2rem
      }
  }

  .push {
      margin-left: auto!important
  }

  .pull {
      margin-right: auto!important
  }

  .item-first {
      -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
      order: -1
  }

  .item-last {
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1
  }

  [class*=grid-][class*="--reverse"] {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse
  }

  @media (min-width:576px) {
      .full {
          -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
          flex: 0 0 auto;
          width: calc(100% - .01px)
      }
      .has-gutter>.full {
          width: calc(100% - 1rem - .01px)
      }
      .has-gutter-l>.full {
          width: calc(100% - 2rem - .01px)
      }
      .has-gutter-xl>.full {
          width: calc(100% - 4rem - .01px)
      }
      .one-half {
          -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
          flex: 0 0 auto;
          width: calc(50% - .01px)
      }
      .has-gutter>.one-half {
          width: calc(50% - 1rem - .01px)
      }
      .has-gutter-l>.one-half {
          width: calc(50% - 2rem - .01px)
      }
      .has-gutter-xl>.one-half {
          width: calc(50% - 4rem - .01px)
      }
      .one-third {
          -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
          flex: 0 0 auto;
          width: calc(33.33333% - .01px)
      }
      .has-gutter>.one-third {
          width: calc(33.33333% - 1rem - .01px)
      }
      .has-gutter-l>.one-third {
          width: calc(33.33333% - 2rem - .01px)
      }
      .has-gutter-xl>.one-third {
          width: calc(33.33333% - 4rem - .01px)
      }
      .one-quarter {
          -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
          flex: 0 0 auto;
          width: calc(25% - .01px)
      }
      .has-gutter>.one-quarter {
          width: calc(25% - 1rem - .01px)
      }
      .has-gutter-l>.one-quarter {
          width: calc(25% - 2rem - .01px)
      }
      .has-gutter-xl>.one-quarter {
          width: calc(25% - 4rem - .01px)
      }
      .one-fifth {
          -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
          flex: 0 0 auto;
          width: calc(20% - .01px)
      }
      .has-gutter>.one-fifth {
          width: calc(20% - 1rem - .01px)
      }
      .has-gutter-l>.one-fifth {
          width: calc(20% - 2rem - .01px)
      }
      .has-gutter-xl>.one-fifth {
          width: calc(20% - 4rem - .01px)
      }
      .one-sixth {
          -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
          flex: 0 0 auto;
          width: calc(16.66667% - .01px)
      }
      .has-gutter>.one-sixth {
          width: calc(16.66667% - 1rem - .01px)
      }
      .has-gutter-l>.one-sixth {
          width: calc(16.66667% - 2rem - .01px)
      }
      .has-gutter-xl>.one-sixth {
          width: calc(16.66667% - 4rem - .01px)
      }
      .two-thirds {
          -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
          flex: 0 0 auto;
          width: calc(66.66667% - .01px)
      }
      .has-gutter>.two-thirds {
          width: calc(66.66667% - 1rem - .01px)
      }
      .has-gutter-l>.two-thirds {
          width: calc(66.66667% - 2rem - .01px)
      }
      .has-gutter-xl>.two-thirds {
          width: calc(66.66667% - 4rem - .01px)
      }
      .three-quarters {
          -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
          flex: 0 0 auto;
          width: calc(75% - .01px)
      }
      .has-gutter>.three-quarters {
          width: calc(75% - 1rem - .01px)
      }
      .has-gutter-l>.three-quarters {
          width: calc(75% - 2rem - .01px)
      }
      .has-gutter-xl>.three-quarters {
          width: calc(75% - 4rem - .01px)
      }
      .five-sixths {
          -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
          flex: 0 0 auto;
          width: calc(83.33333% - .01px)
      }
      .has-gutter>.five-sixths {
          width: calc(83.33333% - 1rem - .01px)
      }
      .has-gutter-l>.five-sixths {
          width: calc(83.33333% - 2rem - .01px)
      }
      .has-gutter-xl>.five-sixths {
          width: calc(83.33333% - 4rem - .01px)
      }
  }

  @media (min-width:576px) and (max-width:767px) {
      [class*=-small-1]>* {
          width: calc(100% - .01px)
      }
      [class*=-small-1].has-gutter>* {
          width: calc(100% - 1rem - .01px)
      }
      [class*=-small-1].has-gutter-l>* {
          width: calc(100% - 2rem - .01px)
      }
      [class*=-small-1].has-gutter-xl>* {
          width: calc(100% - 4rem - .01px)
      }
      [class*=-small-2]>* {
          width: calc(50% - .01px)
      }
      [class*=-small-2].has-gutter>* {
          width: calc(50% - 1rem - .01px)
      }
      [class*=-small-2].has-gutter-l>* {
          width: calc(50% - 2rem - .01px)
      }
      [class*=-small-2].has-gutter-xl>* {
          width: calc(50% - 4rem - .01px)
      }
      [class*=-small-3]>* {
          width: calc(33.33333% - .01px)
      }
      [class*=-small-3].has-gutter>* {
          width: calc(33.33333% - 1rem - .01px)
      }
      [class*=-small-3].has-gutter-l>* {
          width: calc(33.33333% - 2rem - .01px)
      }
      [class*=-small-3].has-gutter-xl>* {
          width: calc(33.33333% - 4rem - .01px)
      }
      [class*=-small-4]>* {
          width: calc(25% - .01px)
      }
      [class*=-small-4].has-gutter>* {
          width: calc(25% - 1rem - .01px)
      }
      [class*=-small-4].has-gutter-l>* {
          width: calc(25% - 2rem - .01px)
      }
      [class*=-small-4].has-gutter-xl>* {
          width: calc(25% - 4rem - .01px)
      }
  }
}

/*/////////////////////////////////////////////////////////////////////*/
@supports (grid-column: auto/span 3){
  @media (min-width:480px) {
      [class*=" grid-"],
      [class^=grid-] {
          display: -ms-grid;
          display: grid;
          grid-auto-flow: dense
      }
      [class*=" grid-"].has-gutter,
      [class^=grid-].has-gutter {
          grid-gap: 1rem
      }
      [class*=" grid-"].has-gutter-l,
      [class^=grid-].has-gutter-l {
          grid-gap: 2rem
      }
      [class*=" grid-"].has-gutter-xl,
      [class^=grid-].has-gutter-xl {
          grid-gap: 4rem
      }
  }

  @media (min-width:480px) {
      .autogrid,
      .grid {
          display: -ms-grid;
          display: grid;
          grid-auto-flow: column;
          grid-auto-columns: 1fr
      }
      .autogrid.has-gutter,
      .grid.has-gutter {
          grid-column-gap: 1rem
      }
      .autogrid.has-gutter-l,
      .grid.has-gutter-l {
          grid-column-gap: 2rem
      }
      .autogrid.has-gutter-xl,
      .grid.has-gutter-xl {
          grid-column-gap: 4rem
      }
  }

  [class*=grid-2] {
      -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr)
  }

  [class*=grid-3] {
      -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr)
  }

  [class*=grid-4] {
      -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr)
  }

  [class*=grid-5] {
      -ms-grid-columns: (1fr)[5];
      grid-template-columns: repeat(5, 1fr)
  }

  [class*=grid-6] {
      -ms-grid-columns: (1fr)[6];
      grid-template-columns: repeat(6, 1fr)
  }

  [class*=grid-7] {
      -ms-grid-columns: (1fr)[7];
      grid-template-columns: repeat(7, 1fr)
  }

  [class*=grid-8] {
      -ms-grid-columns: (1fr)[8];
      grid-template-columns: repeat(8, 1fr)
  }

  [class*=grid-9] {
      -ms-grid-columns: (1fr)[9];
      grid-template-columns: repeat(9, 1fr)
  }

  [class*=grid-10] {
      -ms-grid-columns: (1fr)[10];
      grid-template-columns: repeat(10, 1fr)
  }

  [class*=grid-11] {
      -ms-grid-columns: (1fr)[11];
      grid-template-columns: repeat(11, 1fr)
  }

  [class*=grid-12] {
      -ms-grid-columns: (1fr)[12];
      grid-template-columns: repeat(12, 1fr)
  }

  [class*=col-1] {
      grid-column: auto/span 1
  }

  [class*=row-1] {
      grid-row: auto/span 1
  }

  [class*=col-2] {
      grid-column: auto/span 2
  }

  [class*=row-2] {
      grid-row: auto/span 2
  }

  [class*=col-3] {
      grid-column: auto/span 3
  }

  [class*=row-3] {
      grid-row: auto/span 3
  }

  [class*=col-4] {
      grid-column: auto/span 4
  }

  [class*=row-4] {
      grid-row: auto/span 4
  }

  [class*=col-5] {
      grid-column: auto/span 5
  }

  [class*=row-5] {
      grid-row: auto/span 5
  }

  [class*=col-6] {
      grid-column: auto/span 6
  }

  [class*=row-6] {
      grid-row: auto/span 6
  }

  [class*=col-7] {
      grid-column: auto/span 7
  }

  [class*=row-7] {
      grid-row: auto/span 7
  }

  [class*=col-8] {
      grid-column: auto/span 8
  }

  [class*=row-8] {
      grid-row: auto/span 8
  }

  [class*=col-9] {
      grid-column: auto/span 9
  }

  [class*=row-9] {
      grid-row: auto/span 9
  }

  [class*=col-10] {
      grid-column: auto/span 10
  }

  [class*=row-10] {
      grid-row: auto/span 10
  }

  [class*=col-11] {
      grid-column: auto/span 11
  }

  [class*=row-11] {
      grid-row: auto/span 11
  }

  [class*=col-12] {
      grid-column: auto/span 12
  }

  [class*=row-12] {
      grid-row: auto/span 12
  }

  @media (min-width:480px) and (max-width:767px) {
      [class*=grid-][class*=-small-1] {
          -ms-grid-columns: (1fr)[1];
          grid-template-columns: repeat(1, 1fr)
      }
      [class*=col-][class*=-small-1] {
          grid-column: auto/span 1
      }
      [class*=grid-][class*=-small-2] {
          -ms-grid-columns: (1fr)[2];
          grid-template-columns: repeat(2, 1fr)
      }
      [class*=col-][class*=-small-2] {
          grid-column: auto/span 2
      }
      [class*=grid-][class*=-small-3] {
          -ms-grid-columns: (1fr)[3];
          grid-template-columns: repeat(3, 1fr)
      }
      [class*=col-][class*=-small-3] {
          grid-column: auto/span 3
      }
      [class*=grid-][class*=-small-4] {
          -ms-grid-columns: (1fr)[4];
          grid-template-columns: repeat(4, 1fr)
      }
      [class*=col-][class*=-small-4] {
          grid-column: auto/span 4
      }
      [class*=-small-all] {
          grid-column: 1/-1
      }
  }

  .item-first {
      -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
      order: -1
  }

  .item-last {
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1
  }

  .grid-offset {
      visibility: hidden
  }

  .col-all {
      grid-column: 1/-1
  }

  .row-all {
      grid-row: 1/-1
  }
}