/* --- Reset / box-sizing --- */
* {
  box-sizing: border-box;
}

/* --- Main container --- */
.main-container {
  max-width: 100%;
  margin: 0;
  border: 3px solid red;
  overflow: hidden;
  padding: 0; /* per requirement */
  position: relative;
}

/* --- Grid columns: col-1 .. col-12 (12-column float grid) --- */
/* widths are multiples of 8.333333% */
.col-1  { width: 8.333333%;  float: left; padding: 5px; box-sizing: border-box; }
.col-2  { width: 16.666667%; float: left; padding: 5px; box-sizing: border-box; }
.col-3  { width: 25.0%;      float: left; padding: 5px; box-sizing: border-box; }
.col-4  { width: 33.333333%; float: left; padding: 5px; box-sizing: border-box; }
.col-5  { width: 41.666667%; float: left; padding: 5px; box-sizing: border-box; }
.col-6  { width: 50.0%;      float: left; padding: 5px; box-sizing: border-box; }
.col-7  { width: 58.333333%; float: left; padding: 5px; box-sizing: border-box; }
.col-8  { width: 66.666667%; float: left; padding: 5px; box-sizing: border-box; }
.col-9  { width: 75.0%;      float: left; padding: 5px; box-sizing: border-box; }
.col-10 { width: 83.333333%; float: left; padding: 5px; box-sizing: border-box; }
.col-11 { width: 91.666667%; float: left; padding: 5px; box-sizing: border-box; }
.col-12 { width: 100%;       float: left; padding: 5px; box-sizing: border-box; }

/* clearfix utility for rows */
.row::after,
.clearfix {
  content: "";
  display: block;
  clear: both;
}

/* --- Gap strategy and border strategy --- */
/* Do NOT put borders on the columns themselves */
/* inner-box sits inside columns and provides the visible border */
.inner-box {
  width: 100%;
  height: 100%;
  border: 2px solid red;
  background: #fff; /* optional background */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

/* --- Special requirements --- */
/* Left Sidebar: col-2 + .flush touching container edges (padding:0) */
.flush {
  padding: 0 !important;
}
/* Give the left sidebar fixed height 490px (the .inner-box will fill it) */
.col-2.flush .inner-box {
  height: 490px;
}

/* Right content wrapper must be .col-10 with padding:0 */
.no-pad {
  padding: 0 !important;
}

/* --- Row-specific heights per requirement --- */
/* Row1: four col-3, height: 100px for inner-box */
.row1 .col-3 .inner-box {
  height: 100px;
}

/* Row2:
   - Left half: two stacked col-12, each inner-box height 100px
   - Right half: single big inner-box height 210px
*/
.row2 .col-6:first-child .col-12 .inner-box {
  height: 100px;
}
.row2 .col-6:first-child .col-12 + .col-12 .inner-box {
  height: 100px;
}
.row2 .col-6:last-child .inner-box {
  height: 210px;
}

/* Row3: col-9 and col-3 both inner-box height 150px */
.row3 .col-9 .inner-box,
.row3 .col-3 .inner-box {
  height: 150px;
}

/* Ensure nested .row clears floats (so nested columns behave) */
.row .row { margin: 0; } /* no extra spacing for nested rows */

/* --- Responsive behavior: max-width: 750px --- */
@media (max-width: 750px) {
  /* All columns become full width and stop floating */
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    width: 100% !important;
    float: none !important;
    padding: 5px; /* keep gaps for all columns */
    max-width: 100% !important;
  }

  /* Sidebar transformation: remain flush (padding:0) but height = 4px */
  .col-2.flush { padding: 0 !important; }
  .col-2.flush .inner-box { height: 4px !important; padding: 0 6px; }

  /* Other inner-box heights: we keep them as-is (they will stack vertically) */
}