.form-row {
  display: flex;
  flex-direction: column;
  gap: 0;

  @media (min-width: 876px) {
    flex-direction: row;
    gap: 30px;
  }
}

.form-control {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
  width: 100%;

  input[type="checkbox"] {
    display: inline;
    width: unset;
  }

  input, textarea {
    display: block;
    width: 100%;
    padding: 5px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--color-primary);

    &:focus {
      outline: none;
      box-shadow: none;
      border-bottom: 2px solid var(--color-black);
    }
  }

  &.form-col-6 {
    @media (min-width: 876px) {
      width: calc(100% / 12 * 6);
    }
  }

  &.form-col-4 {
    @media (min-width: 876px) {
      width: calc(100% / 12 * 4);
    }
  }

  &.form-col-2 {
    @media (min-width: 876px) {
      width: calc(100% / 12 * 2);
    }
  }

  select {
    border: none;
    border-bottom: 2px solid var(--color-primary);
  }
}

.form-actions {
  margin-bottom: 30px;
}