.swatches{display:grid;grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));gap:1rem;margin-block-start:1.65rem}.swatches li{background-color:var(--background-color);border-radius:.25em;box-shadow:var(--box-shadow);padding-inline:.5rem;padding-block:.5rem}.swatches .color-box{aspect-ratio:1/1}.swatches .color,.swatches .color-light{font-size:.875rem;inline-size:100%;block-size:50%;padding-inline:.5rem;padding-block:.5rem}.swatches .color{color:#fff;background-color:var(--primary-color)}.swatches .color-light{background-color:var(--primary-color-light)}.swatches h3{color:var(--primary-color);font-size:.875rem;margin-block-start:.25rem}.btn-font-group{display:flex;flex-wrap:wrap;margin-block-end:1rem}.btn-font-group .btn{font-size:.8125rem;margin-inline-end:.25rem;margin-block-end:.5rem}.btn-font-group .active{background-color:var(--primary-color-dark)}.font-sample{background-color:var(--primary-color-light);border-radius:.25em;padding-block:1rem;padding-inline:1rem}.font-sample .h1{color:var(--primary-color);margin-block-start:0}.theme-dark .swatches li{box-shadow:var(--box-glow)}.theme-dark .swatches .color{color:#000}