.wrapper, .wrapper-full { grid-template-columns: 1fr min( var(--wrapper-max-length, var(--line-length)), 100% - var(--wrapper-gap, var(--gutter)) * 2 ) 1fr; grid-column-gap: var(--wrapper-gap, var(--gutter)); display: grid; } .wrapper > *, .wrapper-full > * { grid-column: 2; } .wrapper-full { grid-template-columns: 1fr min( var(--wrapper-max-length, var(--line-length-large)), 100% - var(--wrapper-gap, var(--gutter)) * 2 ) 1fr; } .full-bleed { inline-size: 100%; padding: var(--padding-block, 1rem) var(--padding-inline, 2rem); background-color: var(--background-color, none); grid-column: 1/-1; } .flex { display: inline-flex; } .flex-col { flex-direction: column; } .justify-around { justify-content: space-around; } .justify-center { justify-content: center; } .items-center { align-items: center; } .sr-only { clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; block-size: 1px !important; inline-size: 1px !important; margin: -1px !important; padding: 0 !important; position: absolute !important; overflow: hidden !important; } .invisible { visibility: hidden !important; } .list-inline { margin-left: calc(var(--item-gap, 1ch) * 3 * -1); clip-path: inset(0 0 0 calc(var(--item-gap, 1ch) * 3)); color: var(--item-color, var(--text)); flex-wrap: wrap; align-items: center; padding-left: 0; list-style: none; display: flex; } .list-inline li { padding-left: var(--item-gap, 1ch); } .list-inline li:before { content: var(--item-separator, "•"); margin-right: var(--item-gap, 1ch); width: var(--item-gap, 1ch); text-align: center; display: inline-block; } .list-inline a { color: var(--item-color, var(--text)); text-decoration: none; transition: all 0.2s; } .list-inline a:hover { text-decoration: underline; } /* Focus */ * { outline-offset: 2px; outline-width: 2px; outline-color: #0a76f6; } :focus:focus-visible { outline-style: solid; }