.container,
.container-xs,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-2xl{
width:100%;
margin-inline:auto;
padding-inline:var(--space-6);
}

@media (min-width:768px){
.container,
.container-xs,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-2xl{padding-inline:var(--space-8)}
}

@media (min-width:1200px){
.container,
.container-xs,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-2xl{padding-inline:var(--space-9)}
}

.container-xs{max-width:var(--container-xs)}
.container-sm{max-width:var(--container-sm)}
.container-md{max-width:var(--container-md)}
.container-lg{max-width:var(--container-lg)}
.container-xl{max-width:var(--container-xl)}
.container-2xl{max-width:var(--container-2xl)}

.stack{display:flex;flex-direction:column;gap:var(--space-5)}
.stack-2{gap:var(--space-2)}
.stack-3{gap:var(--space-3)}
.stack-4{gap:var(--space-4)}
.stack-5{gap:var(--space-5)}
.stack-6{gap:var(--space-6)}
.stack-7{gap:var(--space-7)}
.stack-8{gap:var(--space-8)}
.stack-9{gap:var(--space-9)}
.stack-10{gap:var(--space-10)}

.cluster{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.cluster-2{gap:var(--space-2)}
.cluster-3{gap:var(--space-3)}
.cluster-5{gap:var(--space-5)}
.cluster-6{gap:var(--space-6)}
.cluster-8{gap:var(--space-8)}

.row{display:flex;flex-wrap:wrap;gap:var(--space-5)}
.row-2{gap:var(--space-2)}
.row-3{gap:var(--space-3)}
.row-4{gap:var(--space-4)}
.row-6{gap:var(--space-6)}
.row-8{gap:var(--space-8)}

.col{flex:1 1 0;min-width:0}
.col-auto{flex:0 0 auto}

.center{display:flex;align-items:center;justify-content:center}
.center-y{display:flex;align-items:center}
.center-x{display:flex;justify-content:center}
.between{display:flex;align-items:center;justify-content:space-between}
.around{display:flex;align-items:center;justify-content:space-around}
.end{display:flex;align-items:center;justify-content:flex-end}
.start{display:flex;align-items:flex-start}

.grid{display:grid;gap:var(--space-5)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-auto-200{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid-auto-240{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-auto-280{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-auto-320{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

@media (max-width:639px){
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

@media (min-width:640px) and (max-width:959px){
.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.sidebar{display:grid;gap:var(--space-8);grid-template-columns:1fr}
@media (min-width:960px){
.sidebar{grid-template-columns:minmax(0,1fr) 320px;align-items:start}
.sidebar--reverse{grid-template-columns:320px minmax(0,1fr)}
.sidebar--wide{grid-template-columns:minmax(0,1fr) 380px}
}

.section{padding-block:var(--space-11)}
.section-sm{padding-block:var(--space-9)}
.section-lg{padding-block:var(--space-12)}
@media (min-width:768px){
.section{padding-block:var(--space-12)}
.section-sm{padding-block:var(--space-10)}
.section-lg{padding-block:var(--space-13)}
}

.section-soft{background-color:var(--color-bg-soft)}
.section-muted{background-color:var(--color-bg-muted)}
.section-ink{background-color:var(--color-bg-inverse);color:var(--color-ink)}

.divider{border-top:1px solid var(--color-line);margin-block:var(--space-9)}
.divider-strong{border-top:2px solid var(--color-line-strong)}

.spacer-1{height:var(--space-1)}
.spacer-2{height:var(--space-2)}
.spacer-3{height:var(--space-3)}
.spacer-4{height:var(--space-4)}
.spacer-5{height:var(--space-5)}
.spacer-6{height:var(--space-6)}
.spacer-7{height:var(--space-7)}
.spacer-8{height:var(--space-8)}
.spacer-9{height:var(--space-9)}
.spacer-10{height:var(--space-10)}
.spacer-11{height:var(--space-11)}
.spacer-12{height:var(--space-12)}

.aspect-1{aspect-ratio:1 / 1}
.aspect-4-3{aspect-ratio:4 / 3}
.aspect-3-2{aspect-ratio:3 / 2}
.aspect-16-9{aspect-ratio:16 / 9}
.aspect-a4{aspect-ratio:210 / 297}
.aspect-letter{aspect-ratio:216 / 280}

.overflow-hidden{overflow:hidden}
.overflow-visible{overflow:visible}
.overflow-auto{overflow:auto}
.overflow-x-auto{overflow-x:auto;overflow-y:visible}

.sticky-top{position:sticky;top:var(--header-height);z-index:var(--z-sticky)}

.full-bleed{
width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
}

.main-content{padding-top:0}
.with-header-offset{padding-top:var(--header-height)}