/* ================================
   SECTION LAYER
   ================================ */

.l-section {
  position: relative;
  padding-block: 5.46875rem; /* ~87.5px */
}

@media screen and (min-width: 40em) {
  .l-section {
    padding-block: 9.5rem; 
  }
}

/* Section Density Modifiers */
.l-section--tight {
  padding-block: 2.5rem;
}

@media screen and (min-width: 40em) {
  .l-section--tight {
    padding-block: 3.4rem;
  }
}

.l-section--loose {
  padding-block: 7.5rem;
}

@media screen and (min-width: 40em) {
  .l-section--loose {
    padding-block: 15rem;
  }

}

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

/* Section Background Modifiers */
.l-section--light {
  background-color: #f8f8f8;
}

.l-section--dark {
  background-color: #0a0a0a;
  color: #ffffff;
}

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

.l-container {
  max-width: 59.4375rem; /* 951px */
  margin-inline: auto;
  padding-inline: 1.125rem;
  position: relative;
}

@media screen and (min-width: 40em) {
  .l-container {
    padding-inline: 0.9375rem;
  }
}

/* Width Modifiers */
.l-container--narrow {
  max-width: 48rem; /* ~768px */
}

.l-container--wide {
  max-width: 68.75rem; /* 1100px */
}

.l-container--xl {
  max-width: 75rem; /* 1200px */
}

.l-container--full {
  max-width: none;
}

/* Vertical Padding */
.l-container--tight {
  padding-block: 2.5rem;
}

.l-container--medium {
  padding-block: 5.46875rem;
}

@media screen and (min-width: 40em) {
  .l-container--medium {
    padding-block: 10.9375rem;
  }
}

/* Print & Accessibiliy */
@media print {
  .l-section {
    padding-block: 2rem;
  }

  .l-container {
    max-width: 100%;
    padding-inline: 0;
  }
}