.card {
    padding: 10px;
    width: 205px;
    height: 270px;
    border-radius: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.selected {
    border: 3px solid var(--white);
}

.card1 {
    background: var(--gradientBlue);
}

/*.card1 div {
    background-image: url('assets/style1.png');
}*/

.card2 {
    background: var(--gradientOrange);
}

/*.card2 div {
    background-image: url('assets/style2.png');
}*/

.card3 {
    background: var(--gradientYellow);
}

/*.card3 div {
    background-image: url('assets/style3.png');
}*/

.card4 {
    background: var(--gradientOrangeYellow);
}

/*.card4 div {
    background-image: url('assets/style4.png');
}*/

.disabled {
    position: relative;
    pointer-events: none;
    filter: blur(3px) !important;
}

.disabled::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.3);
    filter: blur(25px);
    border-radius: 27px;
}