/*
 * very rarely an app needs a complete grid system but few of the specific cells,
 * and their device specific overides.
 * any element with class `col` is an inline block element
 * and following rule will provide desired width to such elements
 */

.col-1-1 {
  width: 100%;
}

/* 2 col grid */
.col-1-2 {
  width: 50%;
}

/* 3 col grid */
.col-1-3 {
  width: 33.33%;
}

.col-2-3 {
  width: 66.66%;
}

/* 4 col grid */
.col-1-4 {
  width: 25%;
}

.col-3-4 {
  width: 75%;
}

/* 5 col grid */

.col-1-5 {
  width: 20%;
}

.col-2-5 {
  width: 40%;
}

.col-3-5 {
  width: 60%;
}

.col-4-5 {
  width: 80%;
}

/* small device */
@media screen and (--sm-device) {
  .col-sm-1-2,
  .col-sm-1-3,
  .col-sm-2-3,
  .col-sm-1-4,
  .col-sm-3-4 {
    width: 100%;
  }
}

/* medium device */
@media screen and (--md-device) {
  .col-md-1-3,
  .col-md-2-3,
  .col-md-1-4,
  .col-md-3-4 {
    width: 100%;
  }
}

/*!
 * placeholder for large device specific layout rules
 * @media screen and (--lg-device) {
 *   ...
 * }
 */

/*!
 * placeholder for extra large device specific layout rules
 * @media screen and (--xl-device) {
 *   ...
 * }
 */