.cards{
    gap: calc(100dvw * 40 / 1920);
    margin-top: calc(100dvw * 50 / 1920);
}

@media (max-width: 768px) {
    .cards{
        gap: calc(100dvw * 40 / 640);
        margin-top: calc(100dvw * 50 / 640);
    }
}


/* .card-case>div{
    position: relative;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
} */

.card-main{
    box-shadow: -4px 4px 2px 4px rgb(8 94 107 / 25%);
    aspect-ratio: 902/640;
    background-size: cover;
    background-repeat: no-repeat;
}

.h_1{
    background-image: url(../img/h_1.png);
    
}

.h_2{
    background-image: url(../img/h_2.png);
}

.card-deco-1{
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100dvw * 143 / 1920);
    transform: translate(-50%, -50%);
}
.card-deco-2{
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(100dvw * 104 / 1920);
    transform: translate(50%, 25%);
}

.card-deco-3{
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100dvw * 129 / 1920);
        transform: translate(40%, -90%);
}
.card-deco-4{
    position: absolute;
    bottom: 30%;
    right: 0;
    width: calc(100dvw * 136 / 1920);
    transform: translate(50%, 50%);
}

.card-desc{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100dvw * 250 / 1920);
}

.plus-connect{
    width: calc(100dvw * 80 / 1920);
    height: calc(100dvw * 80 / 1920);
}



@media (max-width: 768px) {
    .card-section{width: calc(100dvw * 588 / 640);}
    .cards{
        gap: calc(100dvw * 30 / 640);
    }

    .plus-connect{
        width: calc(100dvw * 68 / 640);
        height: calc(100dvw * 68 / 640);
        /* transform: translateY(0%); */
    }

    .card-deco-1{
        width: calc(100dvw * 134 / 640);
        height: calc(100dvw * 158 / 640);
        transform: translate(0%, -95%);
    }
    .card-deco-2{
        width: calc(100dvw * 119 / 640);
        height: calc(100dvw * 137 / 640);
        transform: translate(10%, 60%);
    }

    .card-deco-3{
        width: calc(100dvw * 129 / 640);
        transform: translate(0%, -90%);
    }
    .card-deco-4{
        bottom: 30%;
        right: 0;
        width: calc(100dvw * 136 / 640);
        transform: translate(20%, 30%);
    }
}

.step-section{
    width: calc(100dvw * 960 / 1920);
    margin-top: calc(100dvw * 100 / 1920);
}

.steps{
    width: calc(100dvw * 960 / 1920);
    gap: calc(100dvw * 55 / 1920);
}
.step-icon{width: calc(100dvw * 320 / 1920);}
.step-right{gap:calc(100dvw * 40 / 1920);}

.step-label{
    width: calc(100dvw * 200 / 1920);
    height: calc(100dvw * 64 / 1920);
    font-size: calc(100dvw * 40 / 1920);
}

.step-section p{
    color: #71452b;
    font-size: calc(100dvw * 30 / 1920);
}

.steps>div{ 
    padding: calc(100dvw * 40 / 1920);
    gap: calc(100dvw * 70 / 1920); 
}

@media (max-width: 768px) {
    .step-section{
        width: calc(100dvw * 576 / 640);
        margin-top: calc(100dvw * 80 / 640);
    }

    .steps{
        width: calc(100dvw * 576 / 640);
        gap: calc(100dvw * 30 / 640);
    }

    .steps>div{ 
        padding: calc(100dvw * 25 / 640); 
        gap: calc(100dvw * 20 / 640);
    }
    .step-icon{width: calc(100dvw * 270 / 640);}
    .step-right{gap:calc(100dvw * 20 / 640);}
    .step-label{
        width: calc(100dvw * 170 / 640);
        height: calc(100dvw * 55 / 640);
        font-size: calc(100dvw * 34 / 640);
    }
    .step-section p{font-size: calc(100dvw * 24 / 640);}
}

button#toggle-rules-btn{
    width: calc(100dvw * 80 / 1920);
}

button#toggle-rules-btn:hover{
    filter: brightness(1.06);
}

@media (max-width: 768px) {
    button#toggle-rules-btn{
        width: calc(100dvw * 80 / 640);
    }
}



#campaign-rules{
    width: calc(100dvw * 1100 / 1920);
    font-size: calc(100dvw * 28 / 1920);
    padding-top: calc(100dvw * 160 / 1920);
    padding-bottom: calc(100dvw * 60 / 1920);
}

#campaign-rules h2{
    font-size: calc(100dvw * 64 / 1920);
}

@media (max-width: 768px) {
    #campaign-rules{
        width: calc(100dvw * 580 / 640);
        font-size: calc(100dvw * 24 / 640);
        padding-top: calc(100dvw * 80 / 640);
        padding-bottom: calc(100dvw * 60 / 640);
    }

    #campaign-rules h2{
        font-size: calc(100dvw * 48 / 640);
    }
}