.blocks-library__item{position:relative;padding:1rem;border:2px dashed #ccc;margin:2.5em 0}.blocks-library__item:before{content:attr(data-name);position:absolute;top:-1em;left:0;font-weight:700;text-transform:lowercase;font-size:1.7rem;line-height:2rem;height:2rem;text-align:right;white-space:nowrap;color:#999}.blocks-library__item-title{margin:.3em 0}.blocks-library__code-wrapper{position:relative}.blocks-library__code-show-trigger{display:block;width:3rem;height:20px;cursor:pointer;margin-bottom:.3em}.blocks-library__code-icon{display:block;width:3rem;height:2px;background-color:#999}.blocks-library__code-icon:after,.blocks-library__code-icon:before{position:absolute;background-color:#999;width:3rem;height:2px;left:0;content:''}.blocks-library__code-icon:before{top:8px}.blocks-library__code-icon:after{top:16px}.blocks-library__code{overflow:hidden}.js .blocks-library__code{max-height:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:cubic-bezier(0,1,.5,1);transition-timing-function:cubic-bezier(0,1,.5,1)}.js .blocks-library__code--shown{-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;max-height:1000px}.blocks-library__code pre{max-height:500px}.blocks-library__menu-toggler{position:fixed;-webkit-backface-visibility:hidden;backface-visibility:hidden;bottom:0;left:0;background-color:#000;width:40px;height:40px;padding:5px}.off-canvas--open .blocks-library__menu-toggler{display:none}.blocks-library__menu-toggler>span,.blocks-library__menu-toggler>span:after,.blocks-library__menu-toggler>span:before{background-color:#fff}@media (min-width:768px){.blocks-library__item{padding:1.5rem 2rem 1.5rem 5rem;margin:5rem 0}.blocks-library__item:before{left:2.5rem;top:20rem;width:21rem;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}.blocks-library__code-show-trigger{position:absolute;top:-1.8rem;left:-4rem}}