*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background-color:#cdd}.app{max-width:80vw;margin:50px auto}header{max-width:800px;margin:0 auto;text-align:center}.swatches{--swatch-min-size: 150px;width:100%;display:grid;padding:0;margin:0;grid-template-columns:repeat(auto-fill,minmax(var(--swatch-min-size),1fr));gap:10px}.swatch{list-style-type:none;--bg: black;width:100%;min-width:var(--swatch-min-size);aspect-ratio:1/1;border-radius:10px;display:grid}.swatch.selected{outline:5px solid tomato}.swatch.main-swatch{background:var(--bg);background-size:cover;max-width:400px;margin:50px auto;--frame-size: 30px;--_frame-bg: var(--frame_bg, url(/images/fabrics/bare_cork.jpg));background:var(--frame-bg);background-size:calc(var(--swatch-min-size) + 30px);background-position:50% 50%;background-repeat:no-repeat;border-radius:25%;display:grid;grid-template-rows:1fr;grid-template-columns:1fr;position:relative}.swatch.main-swatch:before{content:"";display:block;position:relative;width:100%;border:30px solid var(--bg);border-radius:25%;grid-row:1/-1;grid-column:1/-1}.swatch.fabric{background:var(--bg);background-size:cover;background-position:50% 50%;background-repeat:no-repeat}.swatch.frame{--frame-size: 30px;--_frame-bg: var(--frame_bg, url(/images/fabrics/bare_cork.jpg));background:var(--frame-bg);background-size:calc(var(--swatch-min-size) + 30px);background-position:50% 50%;background-repeat:no-repeat;border-radius:25%;display:grid;grid-template-rows:1fr;grid-template-columns:1fr;position:relative}.swatch.frame:before{content:"";display:block;position:relative;width:100%;border:30px solid var(--bg);border-radius:25%;grid-row:1/-1;grid-column:1/-1}.swatch.frame p{position:absolute;left:50%;bottom:-10px;transform:translate(-50%)}.swatch p{font-family:sans-serif;font-weight:700;color:#fff;text-shadow:0px 0px 4px black,0px 0px 2px black,0px 0px 2px black,0px 0px 2px black;text-align:Center;align-self:end;padding:3px}