/** @format */
.row {
  max-width: 1140px;
  margin: 0 auto;
}

/* ========================= */
/*  GLOBAL COLUMN RESET      */
/* ========================= */

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1%;
  background: transparent;
}

.col:first-child {
  margin-left: 0;
}

/* ========================= */
/*  CLEARFIX (GROUP)         */
/* ========================= */

.group::before,
.group::after {
  content: "";
  display: table;
}

.group::after {
  clear: both;
}

/* ========================= */
/*  SECTION RESET            */
/* ========================= */

.section {
  clear: both;
  padding: 0;
  margin: 0;
}

/* ========================= */
/*  GRID OF TWO              */
/* ========================= */

.span_2_of_2 {
  width: 100%;
}

.span_1_of_2 {
  width: 49.5%;
}

/* ========================= */
/*  GRID OF THREE            */
/* ========================= */

.span_3_of_3 {
  width: 100%;
}

.span_2_of_3 {
  width: 66.16%;
}

.span_1_of_3 {
  width: 32.26%;
}

/* ========================= */
/*  GRID OF FOUR             */
/* ========================= */

.span_4_of_4 {
  width: 100%;
}

.span_3_of_4 {
  width: 74.25%;
}

.span_2_of_4 {
  width: 49.5%;
}

.span_1_of_4 {
  width: 24.25%;
}

/* ========================= */
/*  GRID OF FIVE             */
/* ========================= */

.span_5_of_5 {
  width: 100%;
}

.span_4_of_5 {
  width: 79.8%;
}

.span_3_of_5 {
  width: 59.6%;
}

.span_2_of_5 {
  width: 39.4%;
}

.span_1_of_5 {
  width: 19.2%;
}

/* ========================= */
/*  GRID OF SIX              */
/* ========================= */

.span_6_of_6 {
  width: 100%;
}

.span_5_of_6 {
  width: 83.16%;
}

.span_4_of_6 {
  width: 66.33%;
}

.span_3_of_6 {
  width: 49.5%;
}

.span_2_of_6 {
  width: 32.66%;
}

.span_1_of_6 {
  width: 15.83%;
}

/* ========================= */
/*  MOBILE VIEW              */
/* ========================= */

@media only screen and (max-width: 480px) {
  .col {
    margin: 1% 0;
  }

  .span_1_of_2,
  .span_2_of_2,
  .span_1_of_3,
  .span_2_of_3,
  .span_3_of_3,
  .span_1_of_4,
  .span_2_of_4,
  .span_3_of_4,
  .span_4_of_4,
  .span_1_of_5,
  .span_2_of_5,
  .span_3_of_5,
  .span_4_of_5,
  .span_5_of_5,
  .span_1_of_6,
  .span_2_of_6,
  .span_3_of_6,
  .span_4_of_6,
  .span_5_of_6,
  .span_6_of_6 {
    width: 100%;
  }
}