/* =========================
   COLUMN LAYOUT SYSTEM
========================= */

/* 1 Column */
.col-1 {
  width: 100%;
}

/* 2 Columns */
.col-2 {
  width: 50%;
  float: left;
}

/* 3 Columns */
.col-3 {
  width: 33.3333%;
  float: left;
}

/* 4 Columns */
.col-4 {
  width: 25%;
  float: left;
}

/* =========================
   COLUMN WRAPPER
========================= */
.column-wrap {
  width: 100%;
  overflow: hidden;
}

.column {
  padding: 10px;
  box-sizing: border-box;
}

/* =========================
   SIDEBAR & CONTENT
========================= */
.main-content {
  width: 70%;
  float: left;
}

.sidebar {
  width: 30%;
  float: right;
}

/* =========================
   CLEARFIX
========================= */
.column-wrap::after,
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1024px) {
  .main-content,
  .sidebar {
    width: 100%;
    float: none;
  }

  .col-2,
  .col-3,
  .col-4 {
    width: 50%;
  }
}

@media (max-width: 600px) {
  .col-2,
  .col-3,
  .col-4 {
    width: 100%;
    float: none;
  }
}