.form-group {
  font-size: 1.125rem;

  margin-top: 1.25rem;
}

input.form-element,
textarea.form-element {
  font-size: .875rem;

  padding: .375rem .75rem;
}

input.form-element:focus,
textarea.form-element:focus,
.checkbox-wrapper:focus-within {
  outline: var(--core-colour) auto 1px;
}

.form-group textarea {
  height: 4.25rem;
}

.form-group > label:first-child {
  font: inherit;
  line-height: 1.375rem;
}

.form-group.required > label:not(.checkbox-wrapper):first-child::after,
.form-group.required > .checkbox-wrapper > .checkbox-label::after {
  content: "*";
}

.form-group-row {
  display: grid;

  grid-gap: 1.625rem;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.form-element[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;

  opacity: 0;

/* width: 0;
  height: 0; */
  border: none;
  background: transparent;
}

.checkbox-wrapper {
  position: relative;

  display: flex;
  align-items: center;

  height: 1.75rem;
  padding-left: 2rem;
}

.checkbox-label {
  font-size: .875rem;
  line-height: 1.375rem;

  margin-left: .5rem;
}

.checkbox-label::before {
  position: absolute;
  top: 0;
  left: 0;

  width: 1.75rem;
  height: 1.75rem;

  content: "";

  border: 1px solid #dcd7ca;
  background: transparent;
}

.checkbox-wrapper input:checked + .checkbox-label::before {
  font-size: 1rem;

  display: flex;
  align-items: center;
  justify-content: center;

  content: "\2713";

  color: #fff;
  background: var(--core-colour);
}

@media screen and (max-width: 575px), screen and (max-height: 575px) {
  .checkbox-wrapper {
    min-height: 1.75rem;
    height: auto;
  }

  .form-group-row {
    grid-gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  }
}