:root{
  --gd-layout-max:1600px;
  --gd-layout-content:1480px;
  --gd-layout-reading:1120px;
  --gd-layout-gutter:34px;
  --gd-section-space:72px;
  --gd-section-space-sm:48px;
}

.gd-container,
.gd-container--content,
.gd-container--wide,
.gd-container--reading{
  width:100%;
  margin-inline:auto;
  padding-inline:var(--gd-layout-gutter);
}

.gd-container,
.gd-container--content{
  max-width:calc(var(--gd-layout-content) + (2 * var(--gd-layout-gutter)));
}

.gd-container--wide{
  max-width:calc(var(--gd-layout-max) + (2 * var(--gd-layout-gutter)));
}

.gd-container--reading{
  max-width:calc(var(--gd-layout-reading) + (2 * var(--gd-layout-gutter)));
}

.gd-full-bleed{
  width:100%;
  margin-inline:0;
}

.gd-section{
  padding-block:var(--gd-section-space);
}

.gd-section--compact{
  padding-block:var(--gd-section-space-sm);
}

.gd-stack{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.gd-stack--tight{gap:14px}
.gd-stack--loose{gap:40px}

.gd-main{
  width:100%;
  min-width:0;
  overflow:clip;
  min-height:50vh;
}

.gd-main > *{
  min-width:0;
}

@media (max-width:1100px){
  :root{
    --gd-layout-gutter:24px;
    --gd-section-space:60px;
  }
}

@media (max-width:700px){
  :root{
    --gd-layout-gutter:14px;
    --gd-section-space:42px;
    --gd-section-space-sm:30px;
  }
}