.paymentDetailsStep-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2%;
    width: 80%;
    transition: all ease .2s;
}

.paymentDetailsStep-container>fieldset {
    position: relative;
    padding-top: 110px !important;
    margin-top: 120px !important;
    gap: var(--form-input-gap);
    gap: 10px;
}

.paymentDetailsStep-container .credit-card {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% -50%;
}

.paymentDetailsStep-container .credit-card.rotateCard {
    translate: -50% -50%;
}

.paymentDetailsStep-container>fieldset>div:last-of-type {
    display: flex;
    gap: 2%;
}

.paymentDetailsStep-container>fieldset>div:last-of-type>*{
    width: 49%;
}

@media (width <= 500px) { /* Mobile */
    .paymentDetailsStep-container {  
        width: 100%;
    }

    .paymentDetailsStep-container .card-container {
        width: 250px;
        height: 150px;
    }
}
  
@media (500px <= width <= 640px) { /* Tablette/Mobile */
    .paymentDetailsStep-container { 
        width: 100%;
    }

    .paymentDetailsStep-container .card-container {
        width: 275px;
        height: 175px;
    }
}
  
@media (641px <= width <= 768px) { /* Tablette portrait */
    .paymentDetailsStep-container { 
        width: 100%;
    }

}
    
@media (769px <= width <= 1024px) { /* Tablette paysage */
    .paymentDetailsStep-container { 
        width: 100%;   
    }

    .paymentDetailsStep-container .card-container {
        width: 275px;
        height: 175px;
    }
}