.py-art-comparison{padding:var(--art-top) 32px var(--art-bottom);background:var(--art-background);color:#242321}.py-art-comparison__inner{max-width:var(--art-width);margin:auto}.py-art-comparison__header{text-align:center;margin-bottom:32px}.py-art-comparison__header h2{font-size:30px;line-height:1.5;letter-spacing:.025em;font-weight:700;margin:0;text-wrap:balance}.py-art-comparison__header p{font-size:16px;line-height:1.7;color:#64615c;margin:12px 0 0}.py-art-comparison__frame{display:block;position:relative;aspect-ratio:var(--art-ratio);border-radius:16px;overflow:hidden;background:#e9e7e2;box-shadow:0 8px 30px #30291c0d;isolation:isolate}.py-art-comparison__layer{position:absolute;top:0;right:0;bottom:0;left:0}.py-art-comparison__layer img,.py-art-comparison__layer svg{display:block;width:100%;height:100%;object-fit:cover}.py-art-comparison__before{clip-path:inset(0 calc(100% - var(--art-position)) 0 0)}.py-art-comparison__label{position:absolute;top:16px;padding:7px 12px;border-radius:6px;background:#fffffff0;color:#242321;font-size:12px;font-weight:600;pointer-events:none}.py-art-comparison__label--before{left:16px}.py-art-comparison__label--after{right:16px}.py-art-comparison__divider{position:absolute;left:var(--art-position);top:0;bottom:0;width:2px;transform:translate(-50%);background:#fff;pointer-events:none;box-shadow:0 0 4px #0002}.py-art-comparison__handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 2px 12px #0002;color:#242321}.py-art-comparison__range{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none;background:transparent}.py-art-comparison__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1px;height:48px}.py-art-comparison__range::-moz-range-thumb{width:1px;height:48px;border:0;background:transparent}.py-art-comparison__hint{text-align:center;margin:16px 0 0;font-size:12px;line-height:1.6;color:#6b6760}@media(max-width:767px){.py-art-comparison{padding:calc(var(--art-top)*.7) 20px calc(var(--art-bottom)*.7)}.py-art-comparison__header{margin-bottom:24px}.py-art-comparison__header h2{font-size:24px;line-height:1.5}.py-art-comparison__header p{font-size:14px;margin-top:10px}.py-art-comparison__frame{border-radius:12px}.py-art-comparison__label{top:10px;font-size:10px;padding:5px 8px}.py-art-comparison__label--before{left:10px}.py-art-comparison__label--after{right:10px}.py-art-comparison__handle{width:40px;height:40px}.py-art-comparison__hint{font-size:11px;margin-top:12px}}.py-art-comparison__frame{--art-handle-radius:24px}.py-art-comparison__divider{left:clamp(var(--art-handle-radius),var(--art-position),calc(100% - var(--art-handle-radius)))}.py-art-comparison__header:before{content:"";display:block;width:32px;height:3px;border-radius:2px;background:#ee5f00;margin:0 auto 18px}.py-art-comparison__header h2{letter-spacing:.015em}.py-art-comparison__header p{display:inline-block;margin:12px 0 0;padding:5px 14px;background:#eeeae2;border-radius:999px;color:#58534b;font-size:14px;letter-spacing:.04em}@media(max-width:767px){.py-art-comparison__frame{aspect-ratio:5/4;--art-handle-radius:20px}.py-art-comparison__header:before{width:28px;margin-bottom:14px}.py-art-comparison__header p{font-size:12px;padding:5px 12px}}.py-art-comparison__header{display:flex;flex-direction:column;align-items:center;gap:12px}.py-art-comparison__header:before{display:none}.py-art-comparison__header p{order:-1;display:block;margin:0;padding:0;background:none;border-radius:0;font-size:18px;font-weight:500;line-height:1.6;letter-spacing:.02em;color:#514d47}.py-art-comparison__header h2{font-size:28px}.py-art-comparison__frame{--art-boundary:clamp(var(--art-handle-radius),var(--art-position),calc(100% - var(--art-handle-radius)))}.py-art-comparison__before{clip-path:inset(0 calc(100% - var(--art-boundary)) 0 0)}.py-art-comparison__divider{left:var(--art-boundary)}.py-art-comparison__layer{top:-2px;bottom:-2px}@media(max-width:767px){.py-art-comparison__header{gap:10px}.py-art-comparison__header h2{font-size:22px}.py-art-comparison__header p{font-size:16px}}.py-art-comparison__frame.is-adjusting .py-art-comparison__label{visibility:hidden}
/*# sourceMappingURL=/cdn/shop/t/22/assets/py-art-comparison.css.map */