/* ==========================================================================
   Layout — Container, grid, section base styles
   ========================================================================== */

.container {
  max-width: var(--container-max-width);
  width: 80%;
  margin: 0 auto;
  position: relative;
}

/* Section base */
.section {
  padding: 4% 0;
}

.section--main {
  background-color: var(--color-bg-main);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

/* Flexbox row for content sections */
.section__row {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

/* 60/40 split — text column (3/5) */
.section__col--text {
  width: 57.8%;
  margin-right: 5.5%;
  flex-shrink: 0;
}

/* 40 side — image column (2/5) */
.section__col--image {
  width: 36.7%;
  flex-shrink: 0;
}

/* Reversed layout: image left (40%), text right (60%) */
.section__row--reversed .section__col--image {
  width: 36.7%;
  margin-right: 5.5%;
}

.section__row--reversed .section__col--text {
  width: 57.8%;
  margin-right: 0;
}