@import url(https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css);@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);ul,ul li.card{row-gap:.5rem;display:grid}ul{width:min(100%,60rem);overflow:hidden;margin-inline:auto;padding-inline:clamp(1rem,5vw,4rem);list-style:none;perspective:1000px}ul li.card{position:relative;padding-block:1.5rem;padding-inline:2rem;background-color:var(--bg-color);background-image:linear-gradient(to right,rgb(0 0 0 / .15),transparent);transform-style:preserve-3d;color:var(--color);grid-template:'icon' 'title' 'content';column-gap:2rem}ul li.card .icon{grid-area:icon;display:grid;place-items:center}ul li.card .icon i{font-size:2rem}ul li.card .title{grid-area:title;font-size:1.25rem;font-weight:700;text-align:center}ul li.card .content{grid-area:content}@media (min-width:30rem){ul li.card,ul li.card .title{text-align:left}ul li.card{grid-template:'icon title' 'icon content'}}