/*
 * Layout — .container, section spacing, grid utilities.
 * Depends on: variables.css
 *
 * @package Vinelec
 */

/* =================================================================
   CONTAINER
   ================================================================= */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  width: 100%;
}

/* =================================================================
   SECTIONS
   ================================================================= */

.section {
  padding-block: var(--space-2xl);
  position: relative;
}

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

/* =================================================================
   SECTION HEADING BLOCK
   ================================================================= */

.section-head {
  max-width: 700px;
  margin-bottom: 60px;
}

.section-head h2 {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin-bottom: 18px;
}

.section-head p,
.section-lead {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--clr-muted);
}

.section-head--center {
  text-align: center;
  margin-inline: auto;
}

/* =================================================================
   GRID UTILITIES
   ================================================================= */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

/* =================================================================
   FLEX UTILITIES
   ================================================================= */

.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }