.ppe-cc-form__card-num { grid-area: cardNum; }
.ppe-cc-form__name { grid-area: name; }
.ppe-cc-form__expiry { grid-area: expiry; }
.ppe-cc-form__cvc { grid-area: cvc; }
.ppe-cc-form__submit { grid-area: submit; }
.ppe-cc-form__credit-card {
  grid-area: creditCard;
  margin: auto;
}
.ppe-cc-form__errors {
  grid-area: errors;
  margin: auto;
}

#ppe_cc_form {
    display: none;
}
#ppe_cc_form.visible {
    display: initial;
}
#ppe_cc_form .grid-container {
  display: grid;
  grid-template-columns: 25% 25% 50%;
  grid-template-areas:
    'cardNum cardNum creditCard'
    'name name creditCard'
    'expiry cvc creditCard'
    'submit submit errors'
  ;
  background-color: #fbfbfb;
  border: 1px solid #d6d4d4;
  padding: 10px;
}
#ppe_cc_form .grid-container.ps_17 {
  grid-template-columns: 50% 50%;
  grid-template-areas:
    'creditCard creditCard'
    'errors errors'
    'cardNum cardNum'
    'name name'
    'expiry cvc'
    'submit submit'
  ;
}
#ppe_cc_form .grid-container > div {
  padding: 10px;
  text-align: center;
}
#ppe_cc_form input {
  width: 100%;
  padding: 12px 0px;
  border: 1px solid #ccc;
  border-radius: 3px;
  text-indent: 10px;
}
#ppe_cc_form input.jp-card-valid {
  border: 1px solid green;
}
#ppe_cc_form input.jp-card-invalid {
  border: 1px solid red;
}