/* ==== POSITIONING ==== */

.left { text-align: left; }
.right { text-align: right; }
.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.justify { text-align: justify; }

/* ==== GRID SYSTEM (NEW) ==== */

.container {
  width: 90%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-bottom: 25px;
}

/* Each row becomes a 12-column grid with 25px gaps */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 25px;
  width: 100%;
}

/* Base behaviour: full width on small screens */
.row [class^="col"] {
  min-height: 1px;
  width: 100%;
}

/* ===== Small screens (default): columns act as full-width blocks ===== */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  grid-column: span 12;
}

/* ===== Small-width column variants ===== */
.col-1-sm  { grid-column: span 1; }
.col-2-sm  { grid-column: span 2; }
.col-3-sm  { grid-column: span 3; }
.col-4-sm  { grid-column: span 4; }
.col-5-sm  { grid-column: span 5; }
.col-6-sm  { grid-column: span 6; }
.col-7-sm  { grid-column: span 7; }
.col-8-sm  { grid-column: span 8; }
.col-9-sm  { grid-column: span 9; }
.col-10-sm { grid-column: span 10; }
.col-11-sm { grid-column: span 11; }
.col-12-sm { grid-column: span 12; }

.hidden-sm { display: none; }

/* ===== Medium screens (≥ 540px) ===== */
@media only screen and (min-width: 33.75em) {
  .container { width: 80%; }
}

/* ===== Larger screens (≥ 720px): full 12-column grid ===== */
@media only screen and (min-width: 45em) {

  .col-1  { grid-column: span 1; }
  .col-2  { grid-column: span 2; }
  .col-3  { grid-column: span 3; }
  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }
  .col-6  { grid-column: span 6; }
  .col-7  { grid-column: span 7; }
  .col-8  { grid-column: span 8; }
  .col-9  { grid-column: span 9; }
  .col-10 { grid-column: span 10; }
  .col-11 { grid-column: span 11; }
  .col-12 { grid-column: span 12; }

  .hidden-sm { display: block; }
}

/* Add inner whitespace on smaller screens */
@media screen and (max-width: 1000px) {
  .container {
    width: 100%;              /* let it use full width */
    padding-left: 25px;
    padding-right: 25px;
    box-sizing: border-box;   /* so padding doesn't cause overflow */
  }
}