/*body {
  grid-template-rows: auto auto auto auto; 
  gap: 0px 0px; 
  grid-template-areas: 
    "Header"
    "Main"
    "HowMuchToBorrow"
    "Footer"; 
}*/




header > form {
  display: grid; 
  grid-auto-columns: 1fr; 
  grid-template-columns: 1fr; 
  grid-template-rows: min-content; 
  gap: 30px 0px; 
  width: 100%; 
  background: rgba(255,255,255,0.5); padding: 15px; border-radius: 15px; border:  2px solid #fff;
  margin-top:  30px;
}

header > form > legend { text-transform: uppercase; font-size: 17px; font-weight: bold; text-align: center; }
header > form > p { margin: 0; }


@media (min-width: 768px) {

 header > form {
  margin-top:  40px;
   gap: 30px 30px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
  grid-template-rows: min-content; 
  grid-template-areas: 
    "ContactLegend ContactLegend ContactLegend ContactLegend ContactLegend ContactLegend"
    "ContactName ContactName ContactName ContactEmail ContactEmail ContactEmail"
    "ContactPhone ContactPhone ContactPhone ContactSubject ContactSubject ContactSubject"
    "ContactMessage ContactMessage ContactMessage ContactMessage ContactMessage ContactMessage"
    "ContactRequired ContactRequired ContactCapcha ContactCapcha ContactButton ContactButton" 
    "ContactDetails ContactDetails ContactDetails ContactDetails ContactDetails ContactDetails";
 }

 header > form > legend { grid-area: ContactLegend; }
 header > form > input:nth-of-type(1) { grid-area: ContactName; }
 header > form > input:nth-of-type(2) { grid-area: ContactEmail; }
 header > form > input:nth-of-type(3) { grid-area: ContactPhone; }
 header > form > input:nth-of-type(4) { grid-area: ContactSubject; }
 header > form > textarea { grid-area: ContactMessage; }
 header > form > p { grid-area: ContactRequired; }
 header > form > div { grid-area: ContactCapcha; }
 header > form > button { grid-area: ContactButton; }
 header > form > dl { grid-area: ContactDetails; }
}

@media (min-width: 992px) {

  header{
    display: grid; 
  grid-auto-columns: 1fr; 
  grid-template-columns: 62fr 38fr; 
  grid-template-rows: min-content 1fr; 
  gap: 15px 15px; 
  grid-template-areas: 
    "heading heading"
    "form details"; 
  align-content: center; 
  align-items: center; 
  width: 100%; 
}

header h1 { grid-area: heading; }
header form { grid-area: form; }
header dl { grid-area: details; }



}