@import "../../ui.vars.less";

sc-grid-row { //should have a max width
  display: flex;
  width: 100%;

  @media screen and (max-width: @landscape) {
    flex-wrap: wrap;
  }

  sc-grid-block {
    display: block;
    min-width: 64px;
    flex: 1 1 0;
    -ms-flex: 1 1 0;
    padding: 0 7px;
    order: 1;

    &[responsive-stack-top] {
      @media screen and (max-width: @landscape) {
          order: 0;
      }
    }
  }

  &[col-1], &[col-2], &[col-3] {
    sc-grid-block {
      flex: 1 1 0;
      -ms-flex: 1 1 0;
    }
  }

  &[col-2-two-thirds] {
    sc-grid-block {
      &:first-child {
        flex: 2 1 512px;
        -ms-flex: 2 1 512px;
      }
      &:last-child {
        flex: 1 1 256px;
        -ms-flex: 1 1 256px;
      }
    }
  }
  &[col-2-three-fourths] {
    sc-grid-block {
      &:first-child {
        flex: 2 1 750px;
        -ms-flex: 2 1 750px;
      }     
      &:last-child {
        flex: 1 1 250px;
        -ms-flex: 1 1 250px;
      
      }
    }
  }
}