body{
    margin:0px;
    display:flex;
    flex-direction: column;
    height:100%;
  }
  
  main{
    flex:1;
  }
  
  wrap{
    display: block;
    max-width:1120px;
    margin:0px auto;
  }
  
  row {
    display: flex;
    flex-wrap: wrap;
  }
  
  row wrap{
    flex:1;
    display: flex;
  }
  
  column {
    flex:1;
  }
  
  quarter{
    flex-basis:25%;
  }
  
  third{
    flex-basis:33.333%;
  }
  
  half{
    flex-basis:50%;
  }
  
  twothirds{
    flex-basis:66.666%;
  }
  
  threequarters{
    flex-basis:75%;
  }
  
  minimal{
    flex: 0 0 auto; 
  }
  
  column,quarter,third,half,twothirds,threequarters,minimal{
    padding:0px 8px 0px 8px;
    box-sizing: border-box;
  }
  
  row row column,
  row row quarter,
  row row third,
  row row half,
  row row twothirds,
  row row threequarters,
  row row minimal{
    padding:8px 0px 8px 0px;
  }
  
  row row column:not(:first-child):not(:last-child){
    padding:8px 8px 8px 8px;
  }
  
  @media (max-width: 1008px) {
    quarter{
      flex-basis:30%;
    }
  }
  
  @media (max-width: 736px) {
    main row {
      flex-direction: column;
    }
  
    main wrap{
      flex-direction: column;
      width:100%;
    }
  
    row row column:not(:first-child):not(:last-child){
      padding:8px 0px 8px 0px;
    }
    
    .reverse{
      flex-direction:column-reverse;
    }
  }