.paymentSection {
  display: grid;
  gap: var(--Space-x2);
  width: min(100%, 696px);

  &.isSubmitting {
    opacity: 0.5;
    pointer-events: none;
  }
}

.header {
  display: flex;
  gap: var(--Space-x1);
  align-items: flex-start;
}

.paymentForm {
  display: grid;
  gap: var(--Space-x4);
  max-width: 696px;
}

@media screen and (max-width: 767px) {
  .header {
    flex-direction: column;
  }
}

@media screen and (min-width: 768px) {
  .header {
    justify-content: space-between;
  }
}

@media screen and (max-width: 1366px) {
  .paymentForm {
    margin-bottom: 200px;
  }

  .submitButton {
    display: none;
  }
}

@media screen and (min-width: 1367px) {
  .submitButton {
    justify-self: start;
  }
}