.container {
  width:min(calc(100% - 112px),var(--max));
  margin-inline:auto
}
.section {
  padding-block:88px
}
.section-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:32px;
  margin-block-end:40px
}
.section-head h2 {
  max-inline-size:650px
}
.section-head p {
  max-inline-size:440px;
  margin-block-start:18px
}
.grid-2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px
}
.grid-3 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px
}
.grid-4 {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px
}
.brand {
  flex-shrink:0
}
.breadcrumb {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  font-size:.77rem;
  color:var(--muted);
  padding-block:25px
}
.breadcrumb a:hover {
  text-decoration:underline
}
.page-intro {
  padding-block:38px 54px
}
.page-intro h1 {
  max-inline-size:940px
}
.page-intro .lead {
  margin-block-start:24px
}
.content-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:80px;
  align-items:start
}
.content-layout aside {
  position:sticky;
  inset-block-start:124px
}
.tinted {
  background:var(--surface-alt)
}
.rule {
  border-block-start:1px solid var(--line)
}