body > header { background-position: bottom right; }


body > header > div > form {
  display: grid; 
  grid-auto-columns: 1fr; 
  grid-template-columns: 1fr; 
  grid-template-rows: min-content; 
  gap: 30px 0px; 
  width: 100%; 
  background-color: rgba(255,255,255,0.2);
  padding: 15px;
  color: var(--default-text);
  border-radius: 8px;
}

body > header > div > form > legend { text-transform: uppercase; font-size: 17px; font-weight: bold; text-align: center; display: none; }
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; }
}