@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");@import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");*,:after,:before{box-sizing:border-box}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5;padding-bottom:250px}button,input,select,textarea{font:inherit}:root{--black:#1c1e21;--white:#fff;--tw-color1:#a855f7;--tw-color1-hover:#9333ea}body{background:var(--black);font-family:Inter,sans-serif;color:var(--white);display:flex;margin:0;text-align:center}h2{font-size:2rem}ul{width:min(100%,60rem);overflow:hidden;margin-inline:auto;padding-inline:clamp(1rem,5vw,4rem);list-style:none;perspective:1000px;grid-row-gap:.5rem}ul,ul li.card{display:grid;row-gap:.5rem}ul li.card{position:relative;padding-block:1.5rem;padding-inline:2rem;background-color:var(--bg-color);background-image:linear-gradient(90deg,rgba(0,0,0,.15),transparent);transform-style:preserve-3d;color:var(--color);grid-template:"icon" "title" "content";grid-row-gap:.5rem;grid-column-gap:2rem;column-gap:2rem}ul li.card:after,ul li.card:before{--side-rotate:60deg;content:"";position:absolute;top:0;height:100%;width:100%;transform-origin:calc(50% - (50% * var(--ry))) 50%;transform:rotateY(calc(var(--side-rotate) * var(--ry)));background-color:inherit;background-image:linear-gradient(calc(90deg * var(--ry)),rgba(0,0,0,.25),rgba(0,0,0,.5))}ul li.card:before{--ry:-1;right:100%}ul li.card:after{--ry:1;left:100%}ul li.card .icon{grid-area:icon;display:grid;place-items:center;font-size:4rem}ul li.card .title{grid-area:title;display:grid;place-items:center;font-size:3rem}@media (max-width:575.98px){ul li.card .icon,ul li.card .title{font-size:1.5rem}}@media (min-width:576px) and (max-width:767.98px){ul li.card .icon,ul li.card .title{font-size:2rem}}@media (min-width:768px) and (max-width:991.98px){ul li.card .icon,ul li.card .title{font-size:2.5rem}}@media (min-width:992px) and (max-width:1199.98px){ul li.card .icon,ul li.card .title{font-size:3rem}}@media (min-width:1200px){ul li.card .icon,ul li.card .title{font-size:3rem}}ul li.card .content{grid-area:content}@media (min-width:30rem){ul li.card{grid-template:"icon title" "icon content"}ul li.card,ul li.card .title{text-align:left}}