.sugarcraft-dictionary {
  overflow: hidden;
}

.dict-section {
  width: var(--container);
  margin-inline: auto;
  padding: clamp(64px, 8vw, 110px) 0;
}

.dict-section--tinted {
  width: 100%;
  padding-inline: max(20px, calc((100vw - 1120px) / 2));
  background: linear-gradient(180deg, #fff8f4 0%, #f8f4ef 100%);
}

.dict-section--split {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(280px, 0.72fr);
  column-gap: clamp(24px, 3vw, 42px);
  row-gap: 12px;
  align-items: start;
}

.dict-section--split > .section-kicker {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.dict-section--summary {
  border-top: 1px solid var(--color-line);
}

.section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.46fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.section-kicker {
  width: max-content;
  margin-bottom: 12px;
  color: var(--color-clay);
  font-family: Georgia, serif;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

.section-lead {
  max-width: 820px;
  margin-bottom: 28px;
  color: var(--color-muted);
  font-size: 1.05rem;
}

@media (max-width: 820px) {
  :root {
    --container: min(100vw - 44px, 680px);
  }

  .dict-section,
  .dict-section--tinted {
    width: 100%;
    box-sizing: border-box;
    padding-inline: max(22px, calc((100vw - 680px) / 2));
    padding-block: 56px;
  }

  .dict-section--split,
  .section-grid {
    grid-template-columns: 1fr;
  }
}