.cards-container { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 40px; } .card { width: 280px; height: 180px; perspective: 1000px; } .card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; } .card:hover .card-inner { transform: rotateY(180deg); } .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; background-image: url('https://res.cloudinary.com/dt7matg2d/image/upload/v1753117899/LMD_02_25_CAROL_CAPA_5_i0v7ws.png'); background-size: cover; background-position: center; border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; font-family: sans-serif; padding: 20px; text-align: center; } .card-front .card-number { font-size: 50px; font-weight: bold; } .card-front .card-arrow { font-size: 24px; margin-top: 5px; } .card-back { transform: rotateY(180deg); font-size: 15px; line-height: 1.4; }