/**
 * Grid
 *
 * @author Lex Lexter <hi@leximo.cz>
 * @version 1.0.0
 * @website https://leximo.cz/
 */

.grid {
  overflow: hidden;
  margin: 0 -32px;
  font-size: 0;
}

/*
  - size
  ***
*/

.grid--gaps-large {
  margin: 0 -36px;
}
.grid--gaps-huge {
  margin: 0 -84px;
}

@media only screen and (max-width: 1400px) {

  .grid--gaps-huge {
    margin: 0 -36px;
  }
  
}

@media only screen and (max-width: 800px) {

  .grid, 
  .grid--gaps-large, 
  .grid--gaps-huge {
    margin: 0 -16px;
  }
  
}

/*
  col
  ***
 */

.grid__col {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  padding: 0 32px;
  font-size: 16px;
}

/*
  - size
  ---
*/

.grid--gaps-large .grid__col {
  padding: 0 36px;
}
.grid--gaps-huge .grid__col {
  padding: 0 84px;
}

@media only screen and (max-width: 1400px) {

  .grid--gaps-huge .grid__col {
    padding: 0 36px;
  }
  
}

@media only screen and (max-width: 800px) {

  .grid .grid__col, 
  .grid--gaps-large .grid__col, 
  .grid--gaps-huge .grid__col {
    padding: 0 16px;
  }
  
}

/*
  align
  ---
 */

.grid__col--align-top {
  vertical-align: top;
}
.grid__col--align-middle {
  vertical-align: middle;
}
.grid__col--align-bottom {
  vertical-align: bottom;
}

/*
  size - normal
  ---
 */

.grid__col--size-5 {
  width: 5%;
}
.grid__col--size-10 {
  width: 10%;
}
.grid__col--size-15 {
  width: 15%;
}
.grid__col--size-20 {
  width: 20%;
}
.grid__col--size-25 {
  width: 25%;
}
.grid__col--size-30 {
  width: 30%;
}
.grid__col--size-35 {
  width: 35%;
}
.grid__col--size-40 {
  width: 40%;
}
.grid__col--size-45 {
  width: 45%;
}
.grid__col--size-50 {
  width: 50%;
}
.grid__col--size-55 {
  width: 55%;
}
.grid__col--size-60 {
  width: 60%;
}
.grid__col--size-65 {
  width: 65%;
}
.grid__col--size-70 {
  width: 70%;
}
.grid__col--size-75 {
  width: 75%;
}
.grid__col--size-80 {
  width: 80%;
}
.grid__col--size-85 {
  width: 85%;
}
.grid__col--size-90 {
  width: 90%;
}
.grid__col--size-95 {
  width: 95%;
}
.grid__col--size-100 {
  width: 100%;
}

/*
  size - special
  ---
 */

.grid__col--size-16 {
  width: 16.66%;
}
.grid__col--size-33 {
  width: 33.33%;
}
.grid__col--size-66 {
  width: 66.66%;
}