/*
 * CardSwap — structural styles (vanilla port of the React Bits CardSwap CSS).
 * Visual styling of the cards themselves lives in pages/home.css (.sol-card).
 */
.card-swap-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    perspective: 1200px;
    overflow: visible;
}

.cs-card {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: var(--border-radius-lg, 12px);
    transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

@media (max-width: 1100px) {
    .card-swap-container {
        transform: translate(-50%, -50%) scale(0.8);
    }
}

@media (max-width: 768px) {
    .card-swap-container {
        transform: translate(-50%, -50%) scale(0.62);
    }
}

@media (max-width: 480px) {
    .card-swap-container {
        transform: translate(-50%, -50%) scale(0.5);
    }
}