/**
 * Simple Grid system for Kramall Studio
 * Based on fixed side margins
 */

/* Full width container */
.container-full {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Standard container with 20px margins */
.container {
  width: auto;
  margin: 0 20px;
  box-sizing: border-box;
}

/* Narrow container with 150px margins */
.container-narrow {
  width: auto;
  margin: 0 150px;
  box-sizing: border-box;
}

/* Content container with 450px margins */
.container-content {
  width: auto;
  margin: 0 450px;
  box-sizing: border-box;
}

/* Centered container with max-width */
.container-centered {
  width: 100%;
  max-width: 1820px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Row for flexbox grid */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

/* Base column */
.col {
  padding: 0 10px;
  box-sizing: border-box;
}

/* Fixed width columns */
.col-unit {
  width: 20px;
}

.col-small {
  width: 150px;
}

.col-medium {
  width: 450px;
}

/* Flexible column */
.col-flex {
  flex: 1;
}

/* Keep it simple for now. We'll add responsive breakpoints later */