.oracle-card-picker-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1px;
    margin: 50px auto;
    flex-direction: column;
    align-content: center;
}

.card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%; /* Cards take half of the layout */
    height: 650px;
    perspective: 1000px;
    transition:0.4s ease;
}

.card {
    overflow:hidden;
    position: absolute;
    width: 280px;
    height: 500px;
    background: #f8cde9;
    border-radius: 10px;
    box-shadow: 0px 14px 20px rgba(0, 0, 0, 0.1);
    transform-origin: bottom center;
    transition: 0.5s ease;
    cursor: pointer;
    background-size: cover;
    background-position: center;
}

.card img {
    opacity:0;
    width: 100%;
    height: 100% !important;
    border-radius: 10px;
    object-fit: cover;
    transition: 0.5s ease;
}

.card.active img {
    opacity:1;
}

/* Fan spread: Rotate and position cards */
/*.card:nth-child(1) {*/
/*    transform: rotate(-40deg) translateX(-100px);*/
/*}*/
/*.card:nth-child(2) {*/
/*    transform: rotate(-25deg) translateX(-70px);*/
/*}*/
/*.card:nth-child(3) {*/
/*    transform: rotate(-15deg) translateX(-40px);*/
/*}*/
/*.card:nth-child(4) {*/
/*    transform: rotate(0deg);*/
/*}*/
/*.card:nth-child(5) {*/
/*    transform: rotate(15deg) translateX(40px);*/
/*}*/
/*.card:nth-child(6) {*/
/*    transform: rotate(25deg) translateX(70px);*/
/*}*/
/*.card:nth-child(7) {*/
/*    transform: rotate(40deg) translateX(100px);*/
/*}*/

/* Updated Fan spread: Rotate and position cards further apart */
.card:nth-child(1) {
    transform: rotate(-20deg) translateX(-20vw) translateY(-35px);
}
.card:nth-child(2) {
    transform: rotate(-15deg) translateX(-15vw) translateY(-15px);
}
.card:nth-child(3) {
    transform: rotate(-10deg) translateX(-8vw) translateY(-5px);
}
.card:nth-child(4) {
    transform: rotate(0deg) translateY(0px);
}
.card:nth-child(5) {
    transform: rotate(10deg) translateX(8vw) translateY(-5px);
}
.card:nth-child(6) {
    transform: rotate(15deg) translateX(15vw) translateY(-15px);
}
.card:nth-child(7) {
    transform: rotate(20deg) translateX(20vw) translateY(-35px);
}

.card:hover {
    margin-top:-50px;
}

/* animate on selection */
.oracle-card-picker-wrapper.content-visible .card {
    transform: rotate(-0deg) translateX(-0vw) translateY(-0px) !important;
}

@media(max-width:600px){
    .oracle-card-picker-wrapper.content-visible .card-container {
        height:590px;
    }
    .oracle-card-picker-wrapper.content-visible .card {
        position:absolute;
        right:8%;
        height: 550px;
    }
    .card {
        position:relative;
        width: auto;
        height: 180px;
        transform:none !important;
    }
    
    .card-container {
        display: grid;
        grid-template-columns:1fr 1fr 1fr;
        gap:20px;
        width: 100%; 
        height: auto;
    }
    .card:hover {
    margin-top:0px;
}
    
}

.reset-button {
    display: none;
    margin:  auto;
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #0073aa;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.reset-button:hover {
    background-color: #005f8d;
}

/* Card content section */

/* Hidden content container */
.card-content {
    display: none;
    align-content: space-between;
    color: white;
    width: 100%;
    height: 100%;
    bottom: 0;
    position: absolute;
    padding: 10px;
    text-align: center;
    transition: 0.4s ease;
}

.card.active .card-content{
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 90%);
}

.card-content .card-title{
    color:white !important;
}

.oracle-card-picker-wrapper.content-visible .card-container {
    width: 100%;
}

.oracle-card-picker-wrapper.content-visible .reset-button{
    display:block;
}

.oracle-card-picker-wrapper.content-visible .card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}