.Grid{
  width: 100%;
  margin: 0px auto;
  overflow: auto;
  .gridItemSeparator();
  .GridItemSplit(1);
}




/*
  _ _                                                      _
 (_) |_ ___ _ __ ___  ___   ___  ___ _ __   __ _ _ __ __ _| |_ ___  _ __
 | | __/ _ \ '_ ` _ \/ __| / __|/ _ \ '_ \ / _` | '__/ _` | __/ _ \| '__|
 | | ||  __/ | | | | \__ \ \__ \  __/ |_) | (_| | | | (_| | || (_) | |
 |_|\__\___|_| |_| |_|___/ |___/\___| .__/ \__,_|_|  \__,_|\__\___/|_|
                                    |_|
*/

.gridItemSeparator{
  /*
                            ===== SEPARATORS EXAMPLE ====

                            <div class="Grid-item separator"><div></div></div>

                            <div class="Grid-item separator">
                                <div class="separator-label">
                                    <span>Ciao come te la spassi? </span>
                                </div>
                            </div>
  */
  > .Grid-item.separator{
    width: 100% !important;
    div{
      border-bottom: dotted 3px rgba(0,0,0,0.2);
      box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    }

    div.separator-label{
      border-bottom: none;
      font-size: 0.9em;
      box-shadow: 0px 10px 21px rgba(0, 0, 0, 0.05);
      margin: 70px 0px 40px 0px;
      text-align: center;
      height: 15px;
      line-height: 35px;

      span{
        white-space: nowrap;
        font-size: @font-size-small;
        color: #757575;
        background-color: #EEEEEE;
        border-radius: 200px;
        min-width: 100px;
        width: 10%;
        padding: 5px 15px;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15)
      }
    }
  }

  >.Grid-item.separator:first-child{
    div.separator-label{
      box-shadow: none;
      margin: 0px 0px 40px 0px;
    }
  }
}










/*
  _ _                             _ _ _   _   _
 (_) |_ ___ _ __ ___    ___ _ __ | (_) |_| |_(_)_ __   __ _
 | | __/ _ \ '_ ` _ \  / __| '_ \| | | __| __| | '_ \ / _` |
 | | ||  __/ | | | | | \__ \ |_) | | | |_| |_| | | | | (_| |
 |_|\__\___|_| |_| |_| |___/ .__/|_|_|\__|\__|_|_| |_|\__, |
                           |_|                        |___/
*/



.Grid.splitResponsive{
  .defaultSplit(
                @s:@smallmobile-grid-split,
                @m:@mobile-grid-split,
                @t:@tablet-grid-split,
                @n:@notebook-grid-split,
                @d:@desktop-grid-split,
                @w:@wide-grid-split
  );
}

.Grid.split2{.GridItemSplit(2);}
.Grid.split3{.GridItemSplit(3);}
.Grid.split4{.GridItemSplit(4);}
.Grid.split5{.GridItemSplit(5);}



.GridItemSplit(@q){
  > .Grid-item:first-child:nth-last-child(n+@{q}),
  > .Grid-item:first-child:nth-last-child(n+@{q}) ~ * {
    float: left;
    @percentage:100/@q;
    width: ~"@{percentage}%";
  }
}



.defaultSplit(@s,@m,@t,@n,@d,@w){
  @media @onlyScreen and @smallmobile{
    .GridItemSplit(@s);
  }

  @media @onlyScreen and @mobile{
    .GridItemSplit(@m);
  }

  @media @onlyScreen and @tablet{
    .GridItemSplit(@t);
  }

  @media @onlyScreen and @notebook{
    .GridItemSplit(@n);
  }

  @media @onlyScreen and @desktop{
    .GridItemSplit(@d);
  }

  @media @onlyScreen and @wide{
    .GridItemSplit(@w);
  }
}


.customSplit{
  @media @onlyScreen and @smallmobile, @mobile{
    .GridItemSplit(1);
  }

  @media @onlyScreen and @tablet-and-more{
    .GridItemSplit(2);
  }

}