.card{position:relative;width:330px;height:300px;background-color:#f2f2f2;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;perspective:1000px;box-shadow:0 0 0 5px hsla(0,0%,100%,.5019607843)}.card,.card svg{transition:all .6s cubic-bezier(.175,.885,.32,1.275)}.card svg{width:48px;fill:#333}.card:hover{transform:scale(1.05);box-shadow:0 8px 16px hsla(0,0%,100%,.2)}.card:hover svg{scale:0}.card__content{position:absolute;top:0;left:0;width:100%;height:100%;padding:20px;box-sizing:border-box;background-color:#f2f2f2;transform:rotateX(-90deg);transform-origin:bottom;transition:all .6s cubic-bezier(.175,.885,.32,1.275)}.card:hover .card__content{transform:rotateX(0deg)}.card__title{margin:0;font-size:24px;color:#333;font-weight:700}.card__description{margin:10px 0 0;font-size:14px;color:#777;line-height:1.4}.card__list{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding:2rem 0}@media screen and (max-width:1024px){.card__list{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width:640px){.card__list{grid-template-columns:1fr}}