form#af-form {
  display: block;
  width: 100%;
  container-type: inline-size;
}

af-field {
  display: flex;
  margin-bottom: 12px;

  & > label {
    flex: 0 0 200px;
    padding-top: 6px;
  }

  af-value {
    flex: 1;
  }

  input, select, textarea {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;

    &.af-valid {
      border-color: #080;
    }

    &.af-invalid {
      border-color: #f00;
    }
  }

  textarea {
    width: 300px;
    height: 70px;
  }
}

af-error {
  display: block;
  color: #f00;

  &:empty {
    display: none;
  }
}

@container (max-width: 600px) {
  af-field {
    display: block;

    & > label {
      display: block;
    }
  }
}