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


body > header {  background-image: url(/img/lg/header-legal.webp); }

/* main */




body > header > div > form {
  display: grid; 
  grid-auto-columns: 1fr; 
  grid-template-columns: 1fr; 
  grid-template-rows: min-content; 
  gap: 30px 0px; 
  width: 100%; 
  border-radius: 15px;
  background-color: #393939;
  box-shadow: inset 0 0 0 3px #393939, inset 0 0 0 5px #625a49;
  padding: 15px;
  color: var(--default-text);
}

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


@media (min-width: 768px) {

 body > header > div > form {
   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";
 }

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


@media (min-width: 992px) {
  body > header >  div {

      display: grid; 
  grid-auto-columns: 1fr; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: min-content 1fr; 
  gap: 15px 30px; 
  grid-template-areas:
    "form info"; 
  justify-content: start; 
  width: 100%; 
}


header form { grid-area: form; }
header dl  { grid-area: info; }
}