.tiles{pointer-events:none;opacity:.3;transition:opacity .25s ease-out}.tiles.is-active{opacity:1}.tiles__column{height:80px}.tiles__guide{width:1px;background-color:#4af;opacity:0}.tiles__guide--horizontal:not(.s){bottom:auto;width:auto;right:0;left:0;height:2px}.tiles__guide.is-active{opacity:1}.element,.element__lock{position:absolute}.element__lock{bottom:100%;left:0;cursor:pointer}.controls{display:flex;margin:24px auto}.controls__field{flex:0 1 100%;padding:0 12px}.controls__label{display:block;font-size:14px}.controls__range{display:block;width:100%}.moveable-control-box{pointer-events:all}.section{position:relative;max-width:var(--section-width);margin:auto}.moveable .image{width:100%;display:block;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.tiles__row{display:grid;grid-gap:var(--section-columnGap);grid-template-columns:repeat(var(--section-columnCount),1fr);margin-bottom:var(--section-rowGap)}.tiles__column{height:50px;background-color:rgba(0,0,0,.1);border:1px solid hsla(0,0%,100%,.35)}.tiles__guide{position:absolute;top:0;bottom:0;width:2px;background-color:#357df9}.moveable-control:not(.moveable-line):not(.s){width:8px;height:8px;border-radius:0;box-sizing:border-box;margin-top:-4px;margin-left:-4px;border:2px solid #357df9;background-color:#fff}.moveable-line:not(.moveable-control):not(.s){width:2px;height:2px;background-color:#357df9}.moveable-line:not(.moveable-control):before{content:"";position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px}body,html{font-family:Open Sans,sans-serif;position:relative;margin:0;padding:0;height:100%;color:#333;letter-spacing:1px;background:#f5f5f5;font-weight:300}.page{padding:30px}