/* ============================================
  grid - Ore no Flexible CSS Grid System
============================================ */
/*
 Settings
--------------------------------- */
/*
  Base
--------------------------------- */
/*
  <div class="grid">
    <div class="grid__item">A</div>
    <div class="grid__item">B</div>
    <div class="grid__item">C</div>
  </div>
*/
.grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.grid__item {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0;
}

/*
  Direction
--------------------------------- */
/*
  <div class="grid" data-dir="reverse">
    <div class="grid__item">A</div>
    <div class="grid__item">B</div>
    <div class="grid__item">C</div>
  </div>
*/
.grid[data-dir="normal"] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.grid[data-dir="reverse"] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

/*
  Alignment
--------------------------------- */
/*
  <div class="grid" data-align="center">
    <div class="grid__item">A</div>
    <div class="grid__item">B</div>
    <div class="grid__item" data-align="end middle">C</div>
  </div>
*/
.grid[data-align~="start"] {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.grid[data-align~="center"] {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.grid[data-align~="end"] {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.grid[data-align~="justify"] {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.grid[data-align~="top"] {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.grid[data-align~="middle"] {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.grid[data-align~="bottom"] {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.grid__item[data-align~="start"] {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.grid__item[data-align~="center"] {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.grid__item[data-align~="end"] {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.grid__item[data-align~="top"] {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-item-align: stretch;
  -ms-grid-row-align: stretch;
  align-self: stretch;
}

.grid__item[data-align~="middle"] {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-item-align: stretch;
  -ms-grid-row-align: stretch;
  align-self: stretch;
}

.grid__item[data-align~="bottom"] {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-item-align: stretch;
  -ms-grid-row-align: stretch;
  align-self: stretch;
}

/*
  Grid
--------------------------------- */
/*
  <div class="grid" data-gutter="normal">
    <div class="grid__item" data-grid="sp12 tab4 lap6">A</div>
    <div class="grid__item" data-grid="sp6 tab4 lap3">B</div>
    <div class="grid__item" data-grid="sp6 tab4 lap3">C</div>
  </div>
*/
.grid[data-gutter] {
  width: auto;
}

.grid[data-gutter] > .grid__item {
  border: solid transparent;
  background-clip: padding-box;
}

.grid[data-gutter="flow-small"] {
  margin: -1.2vw;
}

.grid[data-gutter="flow-small"] > .grid__item {
  border-width: 1.2vw;
}

.grid[data-gutter="small"] {
  margin: -1.25vw;
}

.grid[data-gutter="small"] > .grid__item {
  border-width: 1.25vw;
}

.grid[data-gutter="normal"] {
  margin: -2.5vw;
}

.grid[data-gutter="normal"] > .grid__item {
  border-width: 2.5vw;
}

.grid[data-gutter="large"] {
  margin: -3.75vw;
}

.grid[data-gutter="large"] > .grid__item {
  border-width: 3.75vw;
}

.grid__item[data-grid~="ssp1"] {
  width: 8.33333%;
}

.grid__item[data-grid~="ssp2"] {
  width: 16.66667%;
}

.grid__item[data-grid~="ssp3"] {
  width: 25%;
}

.grid__item[data-grid~="ssp4"] {
  width: 33.33333%;
}

.grid__item[data-grid~="ssp5"] {
  width: 41.66667%;
}

.grid__item[data-grid~="ssp6"] {
  width: 50%;
}

.grid__item[data-grid~="ssp7"] {
  width: 58.33333%;
}

.grid__item[data-grid~="ssp8"] {
  width: 66.66667%;
}

.grid__item[data-grid~="ssp9"] {
  width: 75%;
}

.grid__item[data-grid~="ssp10"] {
  width: 83.33333%;
}

.grid__item[data-grid~="ssp11"] {
  width: 91.66667%;
}

.grid__item[data-grid~="ssp12"] {
  width: 100%;
}

.grid__item[data-grid~="sspFive"] {
  width: 20%;
}

@media screen and (min-width: 576px) {
  .grid[data-gutter="flow-small"] {
    margin: -1vw;
  }
  .grid[data-gutter="flow-small"] > .grid__item {
    border-width: 1vw;
  }
  .grid[data-gutter="small"] {
    margin: -0.5vw;
  }
  .grid[data-gutter="small"] > .grid__item {
    border-width: 0.5vw;
  }
  .grid[data-gutter="normal"] {
    margin: -1vw;
  }
  .grid[data-gutter="normal"] > .grid__item {
    border-width: 1vw;
  }
  .grid[data-gutter="large"] {
    margin: -1.5vw;
  }
  .grid[data-gutter="large"] > .grid__item {
    border-width: 1.5vw;
  }
  .grid__item[data-grid~="sp1"] {
    width: 8.33333%;
  }
  .grid__item[data-grid~="sp2"] {
    width: 16.66667%;
  }
  .grid__item[data-grid~="sp3"] {
    width: 25%;
  }
  .grid__item[data-grid~="sp4"] {
    width: 33.33333%;
  }
  .grid__item[data-grid~="sp5"] {
    width: 41.66667%;
  }
  .grid__item[data-grid~="sp6"] {
    width: 50%;
  }
  .grid__item[data-grid~="sp7"] {
    width: 58.33333%;
  }
  .grid__item[data-grid~="sp8"] {
    width: 66.66667%;
  }
  .grid__item[data-grid~="sp9"] {
    width: 75%;
  }
  .grid__item[data-grid~="sp10"] {
    width: 83.33333%;
  }
  .grid__item[data-grid~="sp11"] {
    width: 91.66667%;
  }
  .grid__item[data-grid~="sp12"] {
    width: 100%;
  }
  .grid__item[data-grid~="spFive"] {
    width: 20%;
  }
  .grid__item[data-grid~="spAuto"] {
    width: auto;
  }
}

@media screen and (min-width: 768px) {
  .grid[data-gutter="flow-small"] {
    margin: -1vw;
  }
  .grid[data-gutter="flow-small"] > .grid__item {
    border-width: 1vw;
  }
  .grid[data-gutter="small"] {
    margin: -0.5vw;
  }
  .grid[data-gutter="small"] > .grid__item {
    border-width: 1.4vw;
  }
  .grid[data-gutter="normal"] {
    margin: -1vw;
  }
  .grid[data-gutter="normal"] > .grid__item {
    border-width: 2.5vw;
  }
  .grid[data-gutter="large"] {
    margin: -1.5vw;
  }
  .grid[data-gutter="large"] > .grid__item {
    border-width: 1.5vw;
  }
  .grid__item[data-grid~="tab1"] {
    width: 8.33333%;
  }
  .grid__item[data-grid~="tab2"] {
    width: 16.66667%;
  }
  .grid__item[data-grid~="tab3"] {
    width: 25%;
  }
  .grid__item[data-grid~="tab4"] {
    width: 33.33333%;
  }
  .grid__item[data-grid~="tab5"] {
    width: 41.66667%;
  }
  .grid__item[data-grid~="tab6"] {
    width: 50%;
  }
  .grid__item[data-grid~="tab7"] {
    width: 58.33333%;
  }
  .grid__item[data-grid~="tab8"] {
    width: 66.66667%;
  }
  .grid__item[data-grid~="tab9"] {
    width: 75%;
  }
  .grid__item[data-grid~="tab10"] {
    width: 83.33333%;
  }
  .grid__item[data-grid~="tab11"] {
    width: 91.66667%;
  }
  .grid__item[data-grid~="tab12"] {
    width: 100%;
  }
  .grid__item[data-grid~="tabFive"] {
    width: 20%;
  }
  .grid__item[data-grid~="tabAuto"] {
    width: auto;
  }
}

@media screen and (min-width: 992px) {
  .grid__item[data-grid~="lap1"] {
    width: 8.33333%;
  }
  .grid__item[data-grid~="lap2"] {
    width: 16.66667%;
  }
  .grid__item[data-grid~="lap3"] {
    width: 18%;
  }
  .grid__item[data-grid~="lap4"] {
    width: 33.33333%;
  }
  .grid__item[data-grid~="lap5"] {
    width: 41.66667%;
  }
  .grid__item[data-grid~="lap6"] {
    width: 50%;
  }
  .grid__item[data-grid~="lap7"] {
    width: 58.33333%;
  }
  .grid__item[data-grid~="lap8"] {
    width: 66.66667%;
  }
  .grid__item[data-grid~="lap9"] {
    width: 75%;
  }
  .grid__item[data-grid~="lap10"] {
    width: 83.33333%;
  }
  .grid__item[data-grid~="lap11"] {
    width: 91.66667%;
  }
  .grid__item[data-grid~="lap12"] {
    width: 100%;
  }
  .grid__item[data-grid~="lapFive"] {
    width: 20%;
  }
  .grid__item[data-grid~="lapAuto"] {
    width: auto;
  }
}

@media screen and (min-width: 1200px) {
  .grid__item[data-grid~="desk1"] {
    width: 8.33333%;
  }
  .grid__item[data-grid~="desk2"] {
    width: 16.66667%;
  }
  .grid__item[data-grid~="desk3"] {
    width: 25%;
  }
  .grid__item[data-grid~="desk4"] {
    width: 33.33333%;
  }
  .grid__item[data-grid~="desk5"] {
    width: 41.66667%;
  }
  .grid__item[data-grid~="desk6"] {
    width: 50%;
  }
  .grid__item[data-grid~="desk7"] {
    width: 58.33333%;
  }
  .grid__item[data-grid~="desk8"] {
    width: 66.66667%;
  }
  .grid__item[data-grid~="desk9"] {
    width: 75%;
  }
  .grid__item[data-grid~="desk10"] {
    width: 83.33333%;
  }
  .grid__item[data-grid~="desk11"] {
    width: 91.66667%;
  }
  .grid__item[data-grid~="desk12"] {
    width: 100%;
  }
  .grid__item[data-grid~="deskFive"] {
    width: 20%;
  }
  .grid__item[data-grid~="deskAuto"] {
    width: auto;
  }
}