.download {
  background-color: #F3F7FE;
}

.download h2 {
  margin-bottom: 40px;
}

.download textarea,
.download select,
.download input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-black);
  border-radius: 5px;
  color: var(--color-black);
}

form {
  display: grid;
  gap: 20px;
  width: 100%;
  grid-template-columns: repeat(2, 1fr);
}

form > input[name=firstname] { grid-column: 1; }

form > label[for=lastname] { grid-column: 2; grid-row: 1; }
form > input[name=lastname] { grid-column: 2; }

form > label[for=email] { grid-column: 1; grid-row: 3; }
form > input[name=email] { grid-column: 1;  grid-row: 4; }

form > label[for=phone] { grid-column: 2; grid-row: 3; }
form > input[name=phone] { grid-column: 2;  grid-row: 4; }

form > label[for=company] { grid-column: 1; grid-row: 5; }
form > input[name=company] { grid-column: 1;  grid-row: 6; }

form > label[for=country] { grid-column: 2; grid-row: 5; }
form > select[name=country] { grid-column: 2; grid-row: 6; }

form > label[for=source] { grid-column: 1; grid-row: 7; }
form > select[name=source] { grid-column: 1;  grid-row: 8; }

form > label[for=nodes] { grid-column: 2; grid-row: 7; }
form > input[name=nodes] { grid-column: 2; grid-row: 8; }

form > label[for=type] { grid-column: 1; grid-row: 9; }
form > select[name=type] { grid-column: 1;  grid-row: 10; }

form > label[for=online] { grid-column: 2; grid-row: 9; }
form > select[name=online] { grid-column: 2; grid-row: 10; }

form > label[for=message] { grid-column: span 2; }

form label[for=mac], form input[name=mac] { grid-column: span 2; }

form textarea {
  grid-column: span 2; /* Make the textarea span both columns */
  height: 125px;
}

form button { justify-self: start; }

form > div {
  display: none; /* remove recaptcha from layout flow */
}

@media (max-width: 600px) {
  form {
    display: flex;
    flex-direction: column;
  }
}