/* Flexbox Grid using 12-column layout with course lecture rules */
/* CRITICAL: Use width % (NOT flex shorthand), display:flex + flex-wrap:wrap */

* {
  box-sizing: border-box;
}

/* Main container */
.main-container {
  max-width: 100%;
  margin: 0 auto;
  border: 2px solid red;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

/* 12-column grid classes using width percentages (course standard) */
.col-1  { width: 8.333333%;  padding: 5px; box-sizing: border-box; }
.col-2  { width: 16.666667%; padding: 5px; box-sizing: border-box; }
.col-3  { width: 25.0%;      padding: 5px; box-sizing: border-box; }
.col-4  { width: 33.333333%; padding: 5px; box-sizing: border-box; }
.col-5  { width: 41.666667%; padding: 5px; box-sizing: border-box; }
.col-6  { width: 50.0%;      padding: 5px; box-sizing: border-box; }
.col-7  { width: 58.333333%; padding: 5px; box-sizing: border-box; }
.col-8  { width: 66.666667%; padding: 5px; box-sizing: border-box; }
.col-9  { width: 75.0%;      padding: 5px; box-sizing: border-box; }
.col-10 { width: 83.333333%; padding: 5px; box-sizing: border-box; }
.col-11 { width: 91.666667%; padding: 5px; box-sizing: border-box; }
.col-12 { width: 100%;       padding: 5px; box-sizing: border-box; }

/* Flex containers for rows */
.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* Inner box styling (visual border + content) */
.inner-box {
  width: 100%;
  height: 100%;
  border: 2px solid red;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

/* Special classes */
.flush {
  padding: 0 !important;
}

.no-pad {
  padding: 0 !important;
}

/* Sidebar height */
.col-2.flush .inner-box {
  height: 490px;
}

/* Row-specific heights */
.row1 .col-3 .inner-box {
  height: 100px;
}

.row2 .col-6:first-child .col-12 .inner-box {
  height: 100px;
}
.row2 .col-6:last-child .inner-box {
  height: 210px;
}

.row3 .col-9 .inner-box,
.row3 .col-3 .inner-box {
  height: 150px;
}

/* Ensure nested rows also have flex display */
.row .row {
  margin: 0;
}

/* Responsive behavior: max-width 750px */
@media (max-width: 750px) {
  /* All columns become 100% width */
  .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;
    padding: 5px; /* keep gaps for all except flush */
  }

  /* Sidebar becomes thin strip but remains flush */
  .col-2.flush {
    padding: 0 !important;
  }
  .col-2.flush .inner-box {
    height: 4px !important;
    padding: 0 6px;
  }
}