:root{--grid-gap:20px;--grid-columns:12}#grid-example{padding:40px 0 80px}#grid-example #grid p{background:#e7e7e7;font-family:sans-serif;font-size:85%;line-height:2em;font-weight:700;color:#333;padding:1em;min-height:120px}#grid-example .mb-2{margin-bottom:2em}#grid-example h3{margin:0;margin-bottom:20px}#grid-example #example-1,#grid-example #example-2{margin:60px 0 100px}#grid-example #example-1 .image{background:#333;color:#fff;font-weight:700;text-transform:uppercase;display:flex;justify-content:center;align-items:center;border-radius:100%;width:40px;height:40px;line-height:0}#grid-example #example-1 .banner{--border-size:1px;--border-radius:12px;--border-bg:conic-gradient(from 180deg at 50% 50%,#e92a67 0deg,#a853ba 112.5deg,#2a8af6 228.75deg,rgba(42,138,246,0) 360deg);--padding:1px}#grid-example #example-1 .banner a{position:relative;overflow:hidden;padding:calc(var(--padding) + var(--border-size));border-radius:var(--border-radius);display:inline-block;z-index:0;backface-visibility:hidden;perspective:1000;transform:translateZ(0);display:flex;text-decoration:none}#grid-example #example-1 .banner i{content:"";position:absolute;top:var(--border-size);right:var(--border-size);bottom:var(--border-size);left:var(--border-size);padding:var(--border-size);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;z-index:-1;border-radius:calc(var(--border-radius) + var(--border-size));pointer-events:none}@keyframes spin-light{0%{transform:translate(-50%,-50%) rotate(1turn)}100%{transform:translate(-50%,-50%) rotate(0)}}#grid-example #example-1 .banner i:before{content:"";display:block;background:var(--border-bg);box-shadow:0 0 40px 20px --var(--border-bg);width:141.421356237%;padding-bottom:141.421356237%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:100%;z-index:-2;animation:spin-light 5s linear infinite}#grid-example #example-1 .banner .banner_content{background:#fff;border:1px solid hsla(0,0%,100%,.05);border-radius:.75rem;overflow:hidden;box-shadow:0 20px 48px rgba(0,0,0,.2);padding:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%}#grid-example #example-1 .banner .banner_content span{font-size:1.25rem;font-weight:700;color:#333;margin-bottom:20px}#grid-example #example-1 .banner .banner_content button{background:#333;color:#fff;padding:10px 20px;border:none;border-radius:5px;cursor:pointer;text-transform:uppercase}#grid-example #example-1 .example-1-other{background:#333;color:#fff;display:flex;justify-content:center;align-items:center;border-radius:16px;min-height:230px}#grid-example #example-2 .card{background:#333;color:#fff;border-radius:12px;padding:16px;display:flex;flex-direction:column}#grid-example #example-2 .card__image{width:100px;height:100px;background:#ccc;display:flex;justify-content:center;align-items:center}
/*# sourceMappingURL=grid-example.min.css.map */