/* =========================
   home.css
   Styles ONLY for the home page
   ========================= */


.home-hero h1 {
  margin-bottom: 0.75rem;
}

.contact-layout{
  display:flex;

  margin-top:40px;

}

.left-side, .right-side{
  flex:0 0 50%;
}


.left-container, .right-container{
  --g: 1.5rem;

  display:flex;
  flex-wrap:wrap; /* allows items to move onto a new row */
  gap:var(--g);
}


.left-container > div{
  flex:0 0 calc(50% - (var(--g) /2 )); /* 2 columns - tells each child - dont' grow; don't shrink; take half the container width */
  box-sizing:border-box;
  min-width: 240px;
}

.icon{
  width:3rem;
  height:auto;
  margin:0;
}

.right-container {
  --g: 1.5rem;

  display:flex;
  flex-direction: wrap;
  gap:var(--g);
}

/* Form field grid */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.field >input{font-size:1.5rem;}

.field input,
.field select,
.field textarea {
  width: 100%;
}

.field >select{
  font-size:1.25rem;
}

.field >textarea{
  font-size:1rem;
}
.field-full {
  grid-column: 1 / -1;
}

.form-actions {
  margin-top: 1rem;
  display: grid;
  gap: 0.5rem;
}