@media (max-width: 375px) {
    .main {
        width: 37.5rem;
        font-family: "Space Grotesk", sans-serif;
        flex-direction: column;
        padding-bottom: 2rem;
    }

    .main .card-display {
        background-image: url(./assets/images/bg-main-mobile.png);
        width: 37.5rem;
        height: 24rem;
    }

    .main .card-display .card {
        width: 28.6rem;
        height: 15.7rem;
    }

    .main .card-display .front {
        position: absolute;
        z-index: 2;
        top: 12.6rem;
        left: 1.6rem;
        background-size: 28.6rem 15.7rem;
    }

    .main .card-display .front .chip {
        width: 5.4rem;
        height: 3rem;
        margin-top: 1.8rem;
        margin-left: 1.9rem;
    }

    .main .card-display .front .card-number {
        font-size: 1.8rem;
        margin-top: 3.7rem;
        margin-left: 1.9rem;
    }

    .main .card-display .front .box-name-date {
        width: 24.5rem;
        margin-top: 1.7rem;
        margin-left: 1.9rem;
    }

    .main .card-display .front .box-name-date .cardholder-name {
        font-size: 0.7rem;
    }

    .main .card-display .front .box-name-date .exp-date,
    .main .card-display .front .box-name-date .exp-date .date-month,
    .main .card-display .front .box-name-date .exp-date .date-year {
        font-size: 0.7rem;
    }

    .main .card-display .back {
        top: 3.2rem;
        left: 7.3rem;
        background-size: 28.6rem 15.7rem;
    }

    .main .card-display .back .cvc-box {
        left: 22.8rem;
        top: 7.3rem;
        font-size: 0.7rem;
    }

    .main .payment-form {
        display: flex;
        flex-direction: column;
        margin-left: 2.4rem;
        justify-content: center;
        width: 37.5rem;
    }

    /* Message Error */

    .main .payment-form .message-error-card-number-text,
    .main .payment-form .form-row .cvc-group .message-error-cvc {
        font-size: 0.7rem;
    }

    .main .payment-form .card-form-label {
        margin-top: 2rem;
        font-size: 1rem;
    }
    .main .payment-form .cardholder-name {
        margin-top: 9rem;
    }

    .main .payment-form .card-form-input {
        width: 32.7rem;
        height: 4.5rem;
    }

    .main .payment-form .form-row {
        display: flex;
        column-gap: 1rem;
        margin-top: 2rem;
    }

    .main .payment-form .form-row .exp-date-group .exp-date-label {
        font-size: 1rem;
    }

    .main .payment-form .form-row .exp-date-group .inputs-month-year {
        column-gap: 0.8rem;
    }

    /* Message Error */
    .main
        .payment-form
        .form-row
        .exp-date-group
        .inputs-month-year
        .box-exp-month
        .message-error-exp-month,
    .main
        .payment-form
        .form-row
        .exp-date-group
        .inputs-month-year
        .box-exp-year
        .message-error-exp-year {
        width: 7.2rem;
        font-size: 0.7rem;
    }

    .main
        .payment-form
        .form-row
        .exp-date-group
        .inputs-month-year
        .exp-inputs {
        width: 7.2rem;
        border: 1px solid transparent;
        padding-left: 2.2rem;
    }

    .main .payment-form .form-row .cvc-group {
        display: flex;
        flex-direction: column;
    }

    .main .payment-form .form-row .cvc-group .cvc-label {
        font-size: 1rem;
    }

    .main .payment-form .form-row .cvc-group .cvc-input {
        width: 16.4rem;
        padding-left: 2.2rem;
    }

    .main .btn-confirm {
        width: 32.7rem;
        margin-top: 2.8rem;
        font-size: 1.2rem;
        color: #fff;
    }

    .main .container-thank-you {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 0;
        width: 37.5rem;
        margin-top: 9rem;
    }

    .main .container-thank-you .box-thank-you {
        width: 37.5rem;
        height: 29.1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .main .container-thank-you .box-thank-you .btn-continue {
        width: 32.7rem;
    }
}