.container {
  width: calc(100% - var(--dg-gutter) - var(--dg-gutter));
  max-width: var(--dg-container);
  margin-inline: auto;
}

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

.container--narrow {
  max-width: var(--dg-container-narrow);
}

.container--reading {
  max-width: var(--dg-container-reading);
}

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

.section--compact {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}

.section--surface {
  background: var(--dg-color-surface);
}

.section--dark {
  color: var(--dg-color-white);
  background: var(--dg-gradient-primary);
}

.section--dark :where(h1, h2, h3, h4, a) {
  color: inherit;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--dg-grid-gap);
}

.grid > * {
  min-width: 0;
}

.section-heading {
  max-width: 54rem;
  margin-block-end: clamp(2rem, 1.25rem + 2.5vw, 4rem);
}

.section-heading > :last-child {
  margin-block-end: 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dg-grid-gap);
}

.entry--page .entry-header {
  padding-block-end: clamp(2rem, 1rem + 3vw, 4rem);
  background:
    radial-gradient(circle at 88% 25%, rgb(66 40 211 / 12%) 0 0.45rem, transparent 0.5rem),
    linear-gradient(180deg, var(--dg-color-off-white), var(--dg-color-white));
}

.entry-content {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--dg-section-space);
}

.entry-content > :first-child {
  margin-block-start: 0;
}

.entry-content > :last-child {
  margin-block-end: 0;
}

.entry-content :where(h2, h3, h4) {
  margin-block-start: 1.8em;
}

.entry-featured {
  overflow: hidden;
  border-radius: var(--dg-radius-xl);
}

.entry-featured img {
  width: 100%;
}

.entry--single .entry-header {
  margin-block-end: var(--dg-space-10);
}

.entry--single .entry-content {
  padding-block-start: var(--dg-space-10);
}

.site-main {
  min-height: 50vh;
}

@media (max-width: 63.99rem) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.99rem) {
  .grid,
  .card-grid {
    grid-template-columns: 1fr;
  }
}