:root{--pl-border-color:#ddd;--pl-border-radius:8px;--pl-grid-gap:1rem;--pl-color-fpo:#69b3e7;--pl-color-fpo-light:#edf6fc}#sg-patterns{box-sizing:border-box!important;max-width:100%;padding:0 .5em}.demo-animate{background:#ddd;border-radius:var(--pl-border-radius);cursor:pointer;margin-bottom:1em;padding:1em;text-align:center}.sg-colors{grid-gap:var(--pl-grid-gap);display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));list-style:none!important;margin:0!important;padding:0!important}.sg-colors li{border:1px solid var(--pl-border-color);border-radius:8px;flex:auto;margin:0 .5em .5em 0;max-width:14em;min-width:5em;padding:.3em}.sg-swatch{border-radius:5px;display:block;height:4em;margin-bottom:.3em}.sg-label{font-size:90%;line-height:1}.icon-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.icon-grid__item{align-items:center;border:1px solid var(--pl-border-color);border-radius:var(--pl-border-radius);display:flex;flex-direction:column;height:5.5rem;justify-content:center;padding:8px}.icon-grid .c-icon{margin-bottom:.25rem}.icon-grid__label{font-size:10px}.icon{height:1rem;width:1rem}.icon-boxes h2{font-size:1rem}.fpo{background:var(--pl-color-fpo-light);border:1px dashed var(--pl-color-fpo);border-radius:5px;color:var(--pl-color-fpo);font-weight:700;margin-bottom:1rem;margin-top:1rem;padding:1rem;text-align:center}.sg-pattern-example small{display:none}.sg-pattern-example .l-page-layout--two-column-fixed{height:10rem}.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary{min-height:0}@media (min-width:70em){.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary .fpo-block{height:100vh;margin-bottom:0;width:20rem}}.sg-pattern-example .l-page-layout--two-column-fixed{height:18.3rem;overflow:auto}@media (min-width:70em){.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary{float:left;height:inherit;position:absolute}}.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary .fpo-block{width:100%}@media (min-width:70em){.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary .fpo-block{height:inherit;width:20rem}}.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__main{height:30rem}.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__main .fpo-block{height:30rem;margin-bottom:0}@media (min-width:70em){.sg-pattern-example .c-header--vertical{max-width:20rem}}