/* ==========================================
   LAYOUT UTILITIES
   ========================================== */

/* Main container */
.container {
  max-width: var(--container-max);
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: auto;
}

/* Content containers */
.blog-container,
.content-container {
  margin: var(--spacing-sm) auto;
  max-width: var(--content-max);
  padding: 0 var(--spacing-md);
}

.wide-container {
  max-width: var(--content-wide);
}

/* Archive container */
.archive-container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* About container */
.about-container {
  padding: 0 var(--spacing-lg);
  max-width: var(--content-max);
  margin: auto;
}