.cardWrap{width:300px;height:170px;perspective:900px;display:inline-block;border-radius:12px;cursor:pointer;outline:none}.cardWrap:focus{box-shadow:0 0 0 4px rgba(59,130,246,.12);border-radius:12px}.card{width:100%;height:100%;position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(180deg, #fff 0%, #fbfdff 100%);box-shadow:0 10px 30px rgba(15,23,36,.08);transition:transform 420ms cubic-bezier(0.22, 0.9, 0.25, 1),box-shadow 420ms ease,background 420ms ease;transform-origin:50% 50%;display:flex;align-items:center;padding:16px;box-sizing:border-box}.flippable:hover .card{transform:translateY(-6px) scale(1.02) rotateZ(-0.8deg);box-shadow:0 18px 40px rgba(15,23,36,.12)}.cardFront,.cardBack{position:absolute;inset:0;padding:16px;display:flex;gap:12px;align-items:center;box-sizing:border-box;border-radius:12px;backface-visibility:hidden;transition:opacity 360ms cubic-bezier(0.2, 0.9, 0.3, 1),transform 360ms cubic-bezier(0.2, 0.9, 0.3, 1)}.cardFront{z-index:2;opacity:1;transform:translateY(0);background:linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);flex-direction:row}.cardBack{z-index:1;opacity:0;transform:translateY(8px) scale(0.995);background:linear-gradient(180deg, #ffffff 0%, #fafafa 100%);flex-direction:row;align-items:flex-start;justify-content:center}.flippable:hover .cardFront,.flippable:focus .cardFront{opacity:0;transform:translateY(-6px) scale(0.995);z-index:1}.flippable:hover .cardBack,.flippable:focus .cardBack{opacity:1;transform:translateY(0) scale(1);z-index:2}.frontImage{width:7.5rem;height:7.5rem;-o-object-fit:cover;object-fit:cover;border-radius:8px;flex-shrink:0;background:#f3f4f6}.frontTitle{font-size:1rem;font-weight:600;color:#0f1724;line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.backImage{width:4rem;height:4rem;-o-object-fit:cover;object-fit:cover;border-radius:6px;background:#f3f4f6}.backDescription{font-size:1rem;color:#0f1724;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;align-items:center;text-align:left}@media(prefers-reduced-motion: reduce){.card{transition:none}.cardFront,.cardBack{transition:none}.flippable:hover .card,.flippable:focus .card{transform:none;box-shadow:0 10px 30px rgba(15,23,36,.08)}.flippable:hover .cardFront,.flippable:hover .cardBack{opacity:1;transform:none}}