/* ==========================================================
   05. CONTAINERS
   ========================================================== */

.ent-container {
  width: min(
    calc(100% - (var(--ent-gutter) * 2)),
    var(--ent-container)
  );

  margin-inline: auto;
}

.ent-container--wide {
  width: min(
    calc(100% - (var(--ent-gutter) * 2)),
    var(--ent-container-wide)
  );

  margin-inline: auto;
}

.ent-container--narrow {
  width: min(
    calc(100% - (var(--ent-gutter) * 2)),
    var(--ent-container-narrow)
  );

  margin-inline: auto;
}


/* ==========================================================
   06. SECTIONS
   ========================================================== */

.ent-section {
  position: relative;

  padding-block: clamp(64px, 8vw, 120px);
}

.ent-section--compact {
  padding-block: clamp(40px, 5vw, 72px);
}

.ent-section--flush {
  padding-block: 0;
}


/* Backgrounds */

.ent-section--forest {
  background: var(--ent-forest);
  color: var(--ent-white);
}

.ent-section--forest h1,
.ent-section--forest h2,
.ent-section--forest h3,
.ent-section--forest h4,
.ent-section--forest h5,
.ent-section--forest h6 {
  color: var(--ent-white);
}

.ent-section--cream {
  background: var(--ent-cream);
}

.ent-section--light {
  background: var(--ent-cream-light);
}

.ent-section--white {
  background: var(--ent-white);
}


/* ==========================================================
   07. GRID SYSTEM
   ========================================================== */

.ent-grid {
  display: grid;
  gap: var(--ent-space-6);
}

.ent-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ent-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ent-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ent-grid--6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}


/* ==========================================================
   08. FLEX
   ========================================================== */

.ent-flex {
  display: flex;
}

.ent-flex--center {
  align-items: center;
  justify-content: center;
}

.ent-flex--between {
  align-items: center;
  justify-content: space-between;
}

.ent-flex--wrap {
  flex-wrap: wrap;
}