.cards-grid{display:grid}.cards-grid .card{width:320px;height:360px;perspective:1200px}.cards-grid .card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s ease}.cards-grid .card:hover .card-inner{transform:rotateY(180deg)}.cards-grid .face{position:absolute;inset:0;width:100%;height:100%;border-radius:.75rem;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}.cards-grid .front{transform:rotateY(0deg);position:relative;box-shadow:0 8px 24px rgba(0,0,0,.18)}.cards-grid .front span{position:absolute!important;inset:0!important}.cards-grid .front img{width:100%!important;height:100%!important;-o-object-fit:cover;object-fit:cover;display:block}.cards-grid .front h3{position:absolute;bottom:0;width:100%;height:56px;line-height:56px;color:#ffffff;background:rgba(0,0,0,.45);text-align:center;font-size:1.125rem;padding:0 .75rem;z-index:2}.cards-grid .back{transform:rotateY(180deg);background:linear-gradient(180deg,rgb(201,26,50),rgb(238,65,60));color:#f3f3f3;padding:20px;display:flex;flex-direction:column;justify-content:center;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.18)}.cards-grid .back h3{font-size:1.25rem;margin-bottom:10px}.cards-grid .back p{margin:12px 0 18px;font-size:.95rem;line-height:1.4}@media (max-width:640px){.cards-grid .card{width:280px;height:320px}}