* {
  font-family: "Trebuchet MS", sans-serif;
}

body {
  background-color: rgb(245, 245, 229);
  form {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 0.7fr 0.2fr;
    gap: 50px;
    grid-template-areas:
      "sender recipient"
      "payment payment"
      "submit submit";

    width: 65%;
    margin: auto;
    padding-top: 50px;

    .section {
      background-color: rgb(243, 243, 234);
      padding: 20px;
      border: 1px solid black;
      border-radius: 10px;

      display: flex;
      flex-direction: column;

      gap: 10px;

      .field-container {
        display: flex;
        justify-content: space-between;
      }
    }

    #sender {
      grid-area: sender;
    }

    #recipient {
      grid-area: recipient;
    }

    #payment {
      grid-area: payment;
      width: 30%;
      margin: auto;

      .field-container {
        gap: 10px;
      }

      #card-ccv {
        width: 50px;
      }
    }

    #submit {
      grid-area: submit;
      width: 30%;
      margin: auto;
    }
  }
}