@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 > *,
    .grid--reverse > * {
      -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: 0.5rem;
      margin-left : 0.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: 0.5rem;
      margin-left : 0.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: 0.5rem;
      margin-left : 0.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: 0.5rem;
      margin-left : 0.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: 0.5rem;
      margin-left : 0.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: 0.5rem;
      margin-left : 0.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: 0.5rem;
      margin-left : 0.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: 0.5rem;
      margin-left : 0.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: 0.5rem;
      margin-left : 0.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: 0.5rem;
      margin-left : 0.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: 0.5rem;
      margin-left : 0.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;
  }
}